@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap');


body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background-attachment: fixed;
}
.video_ad {
	display: block;
	position: absolute; 
	top: 0; left: 0;
	min-width: 100%; min-height: 100%; 
	z-index: 9999999;
}
.footer_menu{
	position: fixed;

	right: 10px;
	top: 10px;

	z-index: 5;
}

.mobile_rek {
	display:block; 
} 

.footer_menu a{
	display: block;

	padding: 4px 8px;

	font-size: 10px;
	font-weight: 400;

	color: rgba(255,255,255,.22);
	text-decoration: none;

	background: transparent;
	border: none;

	transition: .2s;
}

.footer_menu a:hover{
	color: rgba(255,255,255,.65);
}
.bg_fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
	180deg,
	#1A1A1E,
	#121214
	);
	overscroll-behavior: none;
	z-index: -1;
}
#main_container {
	display: block;
	position: fixed; 
	width: 100vw;
	min-height: 100vh; 
	margin: 0 auto; 
}
.logotype {
	display: block;
	position: absolute;
	top: 5px;
	left: calc(50% - 5px);
	transform: translateX(-50%);
	width: 150px; 
	height: 40px;
	z-index: 999;
}
.icon_logo {
  position: absolute;
  left: 0px;
  top: 5px;
  width: 30px;
  height: 30px; 
  background: url('../images/icon/logo.png') center center / contain no-repeat;
}
.text_logo {
	display: block;
	position: absolute; 
	top: 0; 
	left: 0;
	line-height: 40px;
	text-indent: 30px; 
	font-family:'Nunito',sans-serif;
	font-weight:700;
	font-size: 24px;
	letter-spacing: -0.3px;
}
.text_name{
	color:white;
}
.text_domain{ 
	color:#E96C90;
}
.logotype:hover { cursor: pointer; }

#content {
	display: block;
	position: absolute; 
	top: 0;  
	left: 0;
	height: 100%;
	width: 100%;
}
.battle_block {
	position: relative; 
	top: 40px;
	display: block;   
	width: calc(33% + 60px);  
	margin: 0 auto;
	border-radius:18px;  
}
.battle_video {
position: absolute;
top: 20px;
width: calc(50% - 6px);
transition: transform .25s ease, box-shadow .25s ease;
border-radius:18px;  
min-height: 400px;
}
.battle_video video {
width:100%; 
object-fit:cover;
display:block;  
	width: 100%;
	aspect-ratio: 9 / 16; /* 🔥 або 16/9, як у тебе */
	position: relative;
	overflow: hidden; 
border-radius:18px;  
}
.battle_video:hover { cursor:  default; }
.vleft:hover {
	box-shadow:
	0 20px 40px rgba(88, 101, 242, 0.25),
	0 50px 90px rgba(88, 101, 242,0.35);
}
.vright:hover { 
	box-shadow:
	0 20px 40px rgba(255, 79, 124, 0.25),
	0 50px 90px rgba(255, 79, 124,0.35);
}
.vright {
	position: relative;
	left: 50%;
	z-index: 88;
}
.vote_btn {
	position:absolute;
	bottom:20px;
	left:50%;
	transform:translateX(-50%);
	height: 44px;
	border-radius:10px;
	width: 140px;
	border:none;
	font-weight:600;
	cursor:pointer;
	font-family:'Nunito',sans-serif;
	font-weight:700;
	font-size: 16px; 
	color:white; 
	display:flex;
	align-items:center;
	justify-content:center;
	gap: 8px;
	transition: all .05s ease;
} 
.vote_left {
	background:#5865f2;
	border: 2px solid #2732aa;
	border-top: 1px solid #2732aa;
	border-bottom: 3px solid #2732aa;
	box-shadow: #2732aa 0px 7px 2px, #000 0px 8px 5px;
	text-shadow:
	-1px -1px 0 #2732aa,
	1px -1px 0 #2732aa,
	-1px 1px 0 #2732aa,
	1px 1px 0 #2732aa;
}
.vote_right {
	background:#ff4f7c;
	border: 2px solid #a41a3e;
	border-top: 1px solid #a52848;
	box-shadow: #a52848 0px 7px 2px, #000 0px 8px 5px;
	text-shadow:
	-1px -1px 0 #a52848,
	1px -1px 0 #a52848,
	-1px 1px 0 #a52848,
	1px 1px 0 #a52848;
}
.vote_left:hover {
	bottom: 22px; 
	box-shadow: #2732aa 0px 9px 2px, #000 0px 8px 5px;
}
.vote_right:hover {
	bottom: 22px; 
	box-shadow: #a52848 0px 9px 2px, #000 0px 8px 5px;
}
.vote_left:active { 
	bottom:16px;
	box-shadow: #2732aa 0px 3px 2px,#000 0px 3px 5px;
  }
.vote_right:active { 
	bottom:16px;
	box-shadow: #a52848 0px 3px 2px,#000 0px 3px 5px;
}
.icon_coin {
	display: inline-block;
	width: 20px;
	height: 20px; 
	background: url('../images/icon/coin.png') center center / contain no-repeat;	
}	
.reward{
display:flex;
align-items:center;
gap:4px;
}

.video_sound {
	outline:3px solid rgba(88,101,242,.9);
	box-shadow:
	0 0 20px rgba(88,101,242,.5),
	0 10px 30px rgba(0,0,0,.25);
}
.sound_icon{
position:absolute;
top:10px;
right:10px;
font-size:22px;
opacity:0;
transition:.2s;
}
.video_sound .sound_icon{
opacity:1;
}
.vs {
	position: absolute;
	display: block;
 	bottom: -15px;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	width: 80px;
 	aspect-ratio: 1/1;
 	background: url('../images/icon/minivs.png') center center / contain no-repeat;
 	filter: drop-shadow(0 8px 18px rgb(88,101,242));
 	z-index: 999;
 }
 .battle_signature {
	 display: block;
	 position: relative; 
	 bottom: -50px; left: 0;
	 width: 100%;
	 height: 40px;
	 text-align: center;
	 font-family:'Nunito',sans-serif;
	 font-weight:700;
	 font-size: 14px;
	 letter-spacing: -0.3px;
	 color: white;
 }
 
.ad_left {
	display: block;
 	position: absolute;
 	left: -360px;
 	top: -30px;
 	width: 160px;
 	height: 600px; 
 	z-index: 99;
	border-radius:12px;
	padding:10px;
	box-shadow:0 10px 30px rgba(0,0,0,0.24);
 }
.ad_right {
	display: block;
  	position: absolute;
  	right: -360px;
  	top: -30px;
  	width: 160px;
  	height: 600px; 
  	z-index: 99;
	border-radius:12px;
	padding:10px;
	box-shadow:0 10px 30px rgba(0,0,0,0.24);
  }

.battle_result {
	display: none;
	position:absolute;
	width: 100%; height: 100%; 
	top: calc(50% + 20px);
	left:50%;
	transform:translate(-50%,-50%);
	padding:20px 0px;
	border-radius:30px;
	font-family: "Racing Sans One", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 48px;
	letter-spacing:-0.3px;
	color:#fff;
	text-align:center;
	text-shadow:
	0 2px 8px rgba(0,0,0,.35);
	backdrop-filter:blur(6px);
	z-index:9999;
	opacity: 0;
	transition:opacity 1s ease;
}   
.show { 
opacity:1;
}
.txt_chose {
	display: block;
	color: white;
	margin-bottom: 25px; 
	text-shadow:
	-0.5px -0.5px 0 black,
	0.5px -0.5px 0 black,
	-0.5px 0.5px 0 black,
	0.5px 0.5px 0 black;
	font-size: 20px;
	margin-top: 10px;
}
.txt_chose_winner {
	font-size: 30px;
	display: block;
	margin-top: 15px;
	text-shadow:
	-0.5px -0.5px 0 black,
	0.5px -0.5px 0 black,
	-0.5px 0.5px 0 black,
	0.5px 0.5px 0 black;
	color: white/* rgb(120, 233, 120) */;
	text-shadow:0 0 18px rgba(255,70,90,.8);
	animation: winnerPop 0.5s ease;
} 
@keyframes winnerPop{
	0%{transform: scale(0.8); opacity:0;}
}
.txtleft { 
	color: #5865f2; 
	text-shadow:
	-1px -1px 0 white,
	1px -1px 0 white,
	-1px 1px 0 white,
	1px 1px 0 white;
}
.txtright { 
	color: #ff4f7c; 
	text-shadow:
	-1px -1px 0 white,
	1px -1px 0 white,
	-1px 1px 0 white,
	1px 1px 0 white;
}
.result_numbers{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
font-size:48px;
font-weight:800; 
text-shadow:
0 0 4px rgba(255,255,255,0.9),
0 0 12px rgba(255,255,255,0.8),
0 0 24px rgba(255,255,255,0.6);
}
.left_percent{
color:#5865F2;
text-shadow:
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
}
.right_percent{
color:#FF4D6D;
text-shadow:
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
}
.vs_text{
font-size:20px;
color:#fff;
font-weight:700; 
text-shadow:
-1px -1px 0 rgb(88, 101, 242),
1px -1px 0 rgb(88, 101, 242),
-1px 1px 0 rgb(88, 101, 242),
1px 1px 0 rgb(88, 101, 242);
}
.result_bar{
margin:14px auto;
width: 100%;
height:25px;
background:#FF4D6D;
border-radius:20px;
overflow:hidden;
box-shadow:
0 0 4px rgba(255,255,255,0.5),
0 0 12px rgba(255,255,255,0.3),
0 0 24px rgba(255,255,255,0.1);
border: 2px solid white;
overflow:hidden;
transform: translateZ(0);
}
.result_fill{
height:100%;
background:linear-gradient(90deg,#5865F2,#7B8CFF);

border-right: 2px solid white;
transition:width .6s ease;
text-align: center;
font-size: 20px;
line-height: 25px;
text-shadow:
-0.5px -0.5px 0 black,
0.5px -0.5px 0 black,
-0.5px 0.5px 0 black,
0.5px 0.5px 0 black;
animation:fillBar .6s ease;

}
.right_vote_number {
	position: relative;
	top: -25px; right: calc(60%/2); 
	display: block;
	text-align: right;
	color: white;
	font-size: 20px;
	line-height: 25px;
	z-index: 99;
	text-shadow:
	-0.5px -0.5px 0 black,
	0.5px -0.5px 0 black,
	-0.5px 0.5px 0 black,
	0.5px 0.5px 0 black;
} 
@keyframes fillBar{
0%{width:0}
100%{width:40%}
}
.result_votes{
position: relative; 
top: 130px; 
font-weight:600;
color:white; 
font-family:'Nunito',sans-serif;
font-weight:700;
font-size: 14px;
letter-spacing: -0.3px;
text-shadow:
-0.5px -0.5px 0 black,
0.5px -0.5px 0 black,
-0.5px 0.5px 0 black,
0.5px 0.5px 0 black; 
}
.glass_box{
	position: relative;
	display: block;
	max-width: 340px; 
	height: 400px;
	margin: 0 auto;
	padding: 24px;
	border-radius: 34px;  
	padding-top: 0px;
	background: linear-gradient(
	180deg,
	#2C2D32,
	#202024
	);
	border: 4px solid rgba(255,255,255,0.15);
	box-shadow:
	0 30px 80px rgba(0,0,0,0.8),
	0 0 40px rgba(88,101,242,0.2),
	inset 0 1px 0 rgba(255,255,255,0.05);

	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow:
	0 20px 60px rgba(0,0,0,0.12), 
	inset 0 -1px 0 rgba(255,255,255,0.22);
	/* margin-top: 3%; */
	top: 50%;
	left: 0%;
	transform: translate(-0%, -50%);
}
.glass_inner{
	position: relative;
	display: block;
	
	border-radius: 28px;
	padding: 24px;
	 
	padding-bottom: 130px;
 }
.reward_btn {
	position: absolute;
	height: 44px;
	border-radius:10px;
	width: 150px;
	border:none;
	font-weight:600;
	cursor:pointer;
	font-family:'Nunito',sans-serif;
	font-weight:700;
	font-size: 16px; 
	color:white; 
	display:flex;
	align-items:center;
	justify-content:center;
	gap: 8px;
	transition: all .05s ease;	
}

.claim {
	transform:translateX(-50%);
	top: 250px;
	left: 90px;
	background: #78D974;
	border: 2px solid #4ca048;
	border-top: 1px solid #4ca048;
	border-bottom: 3px solid #4ca048;
	box-shadow: #4ca048 0px 7px 2px, #000 0px 8px 5px;
	text-shadow:
	-1px -1px 0 #4ca048,
	1px -1px 0 #4ca048,
	-1px 1px 0 #4ca048,
	1px 1px 0 #4ca048;
	line-height: 15px;		
}
.claim:hover { 
	top:248px; 
	box-shadow: #4ca048 0px 9px 2px, #000 0px 8px 5px;

} 
.claim:active { 
	top: 254px;
	box-shadow: #4ca048 0px 3px 2px,#000 0px 3px 5px;
} 
.claim_active  {
	top: 254px;
	box-shadow: #4ca048 0px 3px 2px,#000 0px 3px 5px;
}
.claim_active:hover {
	cursor: default;
	top: 254px;
	box-shadow: #4ca048 0px 3px 2px,#000 0px 3px 5px;
}

.xreward {
	transform:translateX(50%);
	top: 250px;
	right: 90px;
	background:#FEC108;
	border: 2px solid #cd9b01;
	border-top: 1px solid #cd9b01;
	border-bottom: 3px solid #cd9b01;
	box-shadow: #cd9b01 0px 7px 2px, #000 0px 8px 5px;
	text-shadow:
	-1px -1px 0 #a47e0a,
	1px -1px 0 #a47e0a,
	-1px 1px 0 #a47e0a,
	1px 1px 0 #a47e0a;
	line-height: 15px;	
	animation: pulse 0.5s infinite alternate;
}
.xreward:hover {
	top:248px; 
	box-shadow: #cd9b01 0px 9px 2px, #000 0px 8px 5px;
} 
.xreward:active { 
	top: 254px;
	box-shadow: #cd9b01 0px 3px 2px,#000 0px 3px 5px;
}
.xreward_active { 
	top: 254px;
	box-shadow: #cd9b01 0px 3px 2px,#000 0px 3px 5px;
}
.xreward_active:hover {
	cursor: default;
	top: 254px;
	box-shadow: #cd9b01 0px 3px 2px,#000 0px 3px 5px;
}
.loader {
	position: absolute; 
	top: 9px;
	margin-left: 10px;
	display: inline-block; 
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 3px solid rgba(255,255,255,0.3);
	border-top-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
@keyframes pulse {
0% { transform: translateX(50%) rotate(-0.5deg); }
100% { transform: translateX(50%) rotate(0.5deg); }
}
#nextBCount.tick{
	animation: tickAnim 1s ease;
}

@keyframes tickAnim{
	0%   { transform: scale(1); opacity: 1; }
	50%  { transform: scale(1.05); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}
.nextb {
	transform:translateX(0%);
	top: 310px;
	left: 15px;
	background: linear-gradient(180deg, #ffffff, #eaeaea);
	color: #766;
	border: 2px solid #B6AFA9;
	border-top: 1px solid #B6AFA9;
	border-bottom: 3px solid #B6AFA9;
	box-shadow: #B6AFA9 0px 7px 2px, #000 0px 8px 5px;
	text-shadow:
	-1px -1px 0 white,
	1px -1px 0 white,
	-1px 1px 0 white,
	1px 1px 0 white;	
	width: 310px;
	animation: countdownPulse 1s infinite alternate;
}
.nextb:hover {
	top:308px; 
	box-shadow: #B6AFA9 0px 9px 2px, #000 0px 8px 5px;
	opacity: 1;
} 
.nextb:active { 
	top: 314px;
	box-shadow: #B6AFA9 0px 3px 2px,#000 0px 3px 5px;
}
.nextb_active { 
	top: 314px;
	box-shadow: #B6AFA9 0px 3px 2px,#000 0px 3px 5px;
}
.nextb_active:hover { 
	
	cursor: default;
	top: 314px;
	box-shadow: #B6AFA9 0px 3px 2px,#000 0px 3px 5px;
}
@keyframes countdownPulse {
0% { background: #ffffff }
100% { background: #fff8f8; }
}
 
 
.coin_fly{
	position: fixed;
	width: 22px;
	height: 22px;
	background: url('../images/icon/coin.png') center center / contain no-repeat;	
	pointer-events: none;
	opacity: 0;
	z-index: 9999;
}
@keyframes flyCoin {
	0%{
		transform: translate(0,0) scale(1);
		opacity:1;
	}
	70%{
		transform: translate(var(--x), var(--y)) scale(0.7);
		opacity:1;
	}
	100%{
		transform: translate(var(--x), var(--y)) scale(0.4);
		opacity:0;
	}
}
.used{
	opacity: 0.5;
	pointer-events: none;
}
/* невеликий bounce для балансу */
#coin_balance{
	transition: transform 0.2s;
}
#coin_balance.bump{
	transform: scale(1.15);
}
 
.coinbag {
	display: block;
	position: absolute; 
	bottom: 20px; 
	right: -100px;
	height: 80px;
	width: 80px; 
	border-radius: 18px; 
	transition: transform .24s ease; 
}
.coinbag:hover {
	cursor: pointer;
	transform: scale(1.15);
}
.bgo {
	display: block;
	position: absolute; 
	top: -5px;
	left: 9.5px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(255,165,0,0.25);
	box-shadow:
		 0 2px 6px rgba(255,165,0,0.15),
		 0 10px 20px rgba(255,165,0,0.25),
		 0 0 30px rgba(255,165,0,0.4);
}
.icon_bag {
	display: block;
	position: absolute;  
	left: -9px;
	top: -20px;
	width: 100px;
	height: 100px; 
	background: url('../images/icon/bag.png') center center / contain no-repeat;	
}	
.bag_count {
	display: block;
	position: absolute; 
	bottom: 0px; 
	left: 0px;
	width: 80px;
	height: 30px;
	background: rgba(80, 207, 80, 0.8);
	border-radius: 6px;
	text-align: center;
	line-height: 30px;
	color: white;
	font-family:'Nunito',sans-serif;
	font-weight:700;
	font-size: 14px;
	letter-spacing: -0.3px;
	text-shadow:
	-1px -1px 0 #3b8637,
	1px -1px 0 #3b8637,
	-1px 1px 0 #3b8637,
	1px 1px 0 #3b8637;
	box-shadow: inset 0 -2px 4px rgba(0,0,0,0.35);
}
 
.rating {
 display: block;
 position: absolute; 
 bottom: 120px; 
 right: -100px;
 height: 80px;
 width: 80px; 
 border-radius: 18px; 
 transition: transform .24s ease; 
}
.rating:hover {
 cursor: pointer;
 transform: scale(1.15);
} 
.bgo2 {
	display: block;
	position: absolute; 
	top: -5px;
	left: 9.5px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(250, 71, 18, 0.25);
	box-shadow:
		 0 2px 6px rgba(250, 71, 18,0.15),
		 0 10px 20px rgba(250, 71, 18,0.25),
		 0 0 30px rgba(250, 71, 18,0.4);
}
.icon_rating {
 display: block;
 position: absolute;  
 left: -4px;
 top: -22px;
 width: 90px;
 height: 90px; 
 background: url('../images/icon/rating.png') center center / contain no-repeat;	
}	
.rating_count {
 display: block;
 position: absolute; 
 bottom: 0px; 
 left: 0px;
 width: 80px;
 height: 30px;
 background: #5867F2;
 border-radius: 6px;
 text-align: center;
 line-height: 30px;
 color: white;
 font-family:'Nunito',sans-serif;
 font-weight:700;
 font-size: 14px;
 letter-spacing: -0.3px;
 text-shadow:
 -1px -1px 0 #2838ce,
 1px -1px 0 #2838ce,
 -1px 1px 0 #2838ce,
 1px 1px 0 #2838ce; 
 box-shadow: inset 0 -2px 4px rgba(0,0,0,0.35);
}
 
.bonus {
  display: block;
  position: absolute; 
  bottom: 225px; 
  right: -100px;
  height: 80px;
  width: 80px; 
  border-radius: 18px; 
  transition: transform .24s ease; 
}
.bonus:hover {
  cursor: pointer;
  transform: scale(1.15);
} 
.bgo3 {
	display: block;
	position: absolute; 
	top: 0px;
	left: 9.5px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(221, 49, 238, 0.25);
	box-shadow:
		 0 2px 6px rgba(221, 49, 238,0.15),
		 0 10px 20px rgba(221, 49, 238,0.25),
		 0 0 30px rgba(221, 49, 238,0.4);
}
.icon_bonus {
  display: block;
  position: absolute;  
  left: 4px;
  top: 0px;
  width: 70px;
  height: 70px; 
  background: url('../images/icon/bonus.png') center center / contain no-repeat;	
}	
.bonus_count {
  display: block;
  position: absolute; 
  bottom: 0px; 
  left: 0px;
  width: 80px;
  height: 20px;
  background: white;
  border-radius: 6px; 
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.35);
}
.bonus_fill {
	display: block;
	position: absolute; 
	top: 5px;
	left: 5px;
	background: rgba(127, 127, 127, 0.2);
	border-radius: 10px;
	width: 70px;
	height: 10px;
	overflow: hidden;
}
.resultb_fill {
	display: block;
	position: absolute; 
	top: 0; left: 0;
	height: 10px;
	background: #FF507D;
	border-radius: 5px;
	
}
.resultb_fill {
	transition: width 1s cubic-bezier(.2,.8,.2,1);
}
.img_ready {
  display: block;
  position: absolute;  
  left: -10px;
  top: -60px;
  width: 100px;
  height: 100px;
  background: url('../images/icon/watch_ad.png') center center / contain no-repeat;
  transform: scale(0.6);
  opacity: 0;
  transition: all 0.4s cubic-bezier(.2,1.2,.3,1);	
}	 
.img_ready.show {
	transform: scale(1);
	opacity: 1;
}
.coin100block {
	display: block;
	position: absolute; 
	top: 50px;
	right: 12px;
	width: 50px;
	height: 12px; 
	color: white; 
	border-radius: 5px;
	text-align: left;
	z-index: 99;
	line-height: 12px;
	font-family:'Nunito',sans-serif;
	font-weight:700;
	font-size: 16px;
	background: rgba(0,0,0,0.3);
	box-shadow: 0 -20px 10px rgba(0,0,0,0.35);
	letter-spacing: -0.3px;
	text-shadow:
	  -1px -1px 0 #771AA8,
	  1px -1px 0 #771AA8,
	  -1px 1px 0 #771AA8,
	  1px 1px 0 #771AA8;  
	opacity: 0; 
}
.coin100block.show {
	transform: scale(1);
	opacity: 1;
}
.icon_3coin {
	position: absolute;  
	top: -4px;
	right: 0;
	width: 20px;
	height: 20px; 
	background: url('../images/icon/coin.png') center center / contain no-repeat;	
}
.bonus_pulse {
	animation: bonusPulse 0.5s cubic-bezier(.2,.8,.2,1);
}
/* shine ефект */
.resultb_fill.full::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
	animation: shineFull 1.2s infinite;
}

@keyframes shineFull {
	from { left: -100%; }
	to { left: 120%; }
}

/* пульс */
.bonus_ready {
	animation: bonusPulse 1s infinite;
}

@keyframes bonusPulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.08); }
	100% { transform: scale(1); }
}

//* glow */
.bonus_ready .icon_bonus {
	filter: drop-shadow(0 0 10px gold)
			drop-shadow(0 0 20px orange);
}

/* частинки */
.bonus_particle {
	position: fixed;
	width: 8px;
	height: 8px;
	background: gold;
	border-radius: 50%;
	pointer-events: none;
	animation: particleFly 0.8s ease forwards;
}

@keyframes particleFly {
	to {
		transform: translate(var(--x), var(--y));
		opacity: 0;
	}
}
@keyframes bonusPulse {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.12); }
	70%  { transform: scale(0.98); }
	100% { transform: scale(1); }
}
.show_bonus_msg {
	  display: block;
	  position: absolute;  
	  left: 9px;
	  top: -40px;
	  width: 60px;
	  height: 60px; 
	  background: url('../images/icon/unlock_bonus.png') center center / contain no-repeat;
	  opacity: 1; 	
}
.showstepbonus {
	display: block;
	position: absolute; 
	top: 50px;
	right: 14px;
	width: 50px;
	height: 12px; 
	color: white; 
	border-radius: 5px;
	text-align: center;
	z-index: 99;
	line-height: 12px;
	font-family:'Nunito',sans-serif;
	font-weight:700;
	font-size: 14px;
	background: rgba(0,0,0,0.3);
	box-shadow: 0 -20px 10px rgba(0,0,0,0.35); 
	text-shadow:
	  -1px -1px 0 #771AA8,
	  1px -1px 0 #771AA8,
	  -1px 1px 0 #771AA8,
	  1px 1px 0 #771AA8;   
}
.show_bonus_msg.hide {
	transform: scale(0.6);
	opacity: 0;
}
.showstepbonus.hide {
	opacity: 0;
}
@keyframes shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

.shake {
	animation: shake 0.4s ease; 
}

.chat {
	display: block;
	position: absolute; 
	bottom: 20px; 
	left: -100px;
	height: 80px;
	width: 80px; 
	border-radius: 18px; 
	transition: transform .24s ease; 
}
.chat:hover {
	cursor: pointer;
	transform: scale(1.15);
}
.bgo4 {
	display: block;
	position: absolute; 
	top: -5px;
	left: 9.5px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(255,165,0,0.25);
	box-shadow:
		 0 2px 6px rgba(255,165,0,0.15),
		 0 10px 20px rgba(255,165,0,0.25),
		 0 0 30px rgba(255,165,0,0.4);
}
.icon_chat {
	display: block;
	position: absolute;  
	left: 0px;
	top: -15px;
	width: 80px;
	height: 80px; 
	background: url('../images/icon/chat.png') center center / contain no-repeat;	
}	
.chat_count {
	display: block;
	position: absolute; 
	bottom: 0px; 
	left: 0px;
	width: 80px;
	height: 30px; 
	background: linear-gradient(
	180deg, 
	#FFCE04,
	#DC6502
	);
	border-radius: 6px;
	text-align: center;
	line-height: 30px;
	color: white;
	font-family:'Nunito',sans-serif;
	font-weight:700;
	font-size: 14px;
	letter-spacing: -0.3px;
	text-shadow:
	-1px -1px 0 #DC6502,
	1px -1px 0 #DC6502,
	-1px 1px 0 #DC6502,
	1px 1px 0 #DC6502; 
	box-shadow: inset 0 -2px 4px rgba(0,0,0,0.35);
}
 

#menu {
	 display: flex;
	 justify-content: center;   /* центр по горизонталі */
	 align-items: center;       /* центр по вертикалі */
	 gap: 12px;                 /* відстань між елементами */
	 position: fixed;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 height: 16%;
	 overflow: visible;
	 /* border-top: 0.6px solid #D5D5D5; */
 }
.menu_row {
	width: calc(33% + 60px);  
	height: calc(100% - 20px);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}
.menu_status {
	display: flex;
	position: relative; 
	top: 8px; 
	align-items: center;
	justify-content: center;
	gap: 2px; /* відстань між іконкою і текстом */
	margin: 0 auto;
	background: #ff4f7c;
	border-radius: 10px; 
	height: 20px;
	text-align: center;
	line-height: 20px;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 700;
	color: white;
	text-shadow:
	-0.5px -0.5px 0 #a52848,
	0.5px -0.5px 0 #a52848,
	-0.5px 0.5px 0 #a52848,
	0.5px 0.5px 0 #a52848;
	font-family:'Nunito',sans-serif;
	font-weight:700; 
	letter-spacing: -0.3px; 
	transition: opacity 0.3s ease; 
}
.icon_coin_categ_2 { 
	width: 12px;
	height: 12px;
	background: url('../images/icon/coin.png') center/contain no-repeat;
	filter: drop-shadow(0 0 1px rgb(153, 9, 9));
}
.menu_card {
	 position: relative;
	 flex: 1 1 0;
	 max-width: 280px; 
	 border-radius: 18px;
	 overflow: hidden; 
	 border-radius: 16px;
	 overflow: hidden;
	 transition: transform 0.3s ease;
 }  
.menu_card:hover {
	 cursor: pointer;
	 transform: scale(1.2);
 }
.menu_card img {
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
	 display: block;
 }
.see {
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
	border: 2px solid rgba(0, 0, 0, 0.5);
	transform: scale(1.12);
}
.category_card.see:hover { 
	cursor: pointer;
	transform: scale(1.35);
} 

#votex { display: block; }
.users_rating {
	display: none; 
	position: relative;   /* краще ніж absolute */
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;     /* 🔥 гарантія висоти */
	z-index: 999;
	overflow-y: auto; 
	/* 🔥 приховує скрол в Firefox */
	scrollbar-width: none;
	/* 🔥 плавний скрол на iOS */
	-webkit-overflow-scrolling: touch;
} 
.users_rating::-webkit-scrollbar {
		display: none;
} 
.rating-page { 
  margin: 0 auto;
  padding: 30px 20px;
  max-width: 720px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: #fff;
  padding-bottom: 200px;
} 
.glass {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 24px;

  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);

  border: 1px solid rgba(255,255,255,0.12);

  box-shadow:
	0 20px 60px rgba(0,0,0,0.6),
	inset 0 1px 0 rgba(255,255,255,0.08);
} 
.user-card {
  position: relative;
  padding: 24px;
  margin-bottom: 30px;

  transition: 0.3s;
} 
.user-left {
  display: flex;
  align-items: center;
  gap: 16px;
} 
.user-info {
  flex: 1;
} 
.username {
  font-size: 24px;
  font-weight: 700;
  color: #fff;

  background: transparent;
  border: none;
  outline: none;

  text-shadow: 0 0 12px rgba(255,255,255,0.15);
} 
.edit_btn {
	position: absolute; 
	top: 20px;
	right: 20px; 
	padding: 6px 12px;
	border-radius: 10px;
	border: none; 
	color: white;
	cursor: pointer;
	background: linear-gradient(180deg, #ffffff, #eaeaea);
	color: #766;
	border: 2px solid #B6AFA9;
	border-top: 1px solid #B6AFA9;
	border-bottom: 3px solid #B6AFA9;
	box-shadow: #B6AFA9 0px 4px 2px, #000 0px 8px 5px;
	text-shadow:
	-1px -1px 0 white,
	1px -1px 0 white,
	-1px 1px 0 white,
	1px 1px 0 white;	 
	animation: editPulse 1s infinite alternate;
	font-family:'Nunito',sans-serif;
	font-weight:700;
	font-size: 14px;
	letter-spacing: -0.3px;
}
.edit_btn:hover {
	top: 19px; 
	box-shadow: #B6AFA9 0px 5px 2px, #000 0px 8px 5px;
	opacity: 1;
} 
.edit_btn:active { 
	top: 22px;
	box-shadow: #B6AFA9 0px 3px 2px,#000 0px 3px 5px;
}  
.stats {
  display: flex;
  gap: 25px;
  margin-top: 12px;

  font-size: 15px;
  opacity: 0.9;
} 
.tables {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
} 
.table-card {
  flex: 1;
  padding: 22px;
  min-width: 280px;

  transition: 0.3s;
} 
.table-card h2 { 
  margin: 0 0 15px;
  font-size: 20px;

  display: flex;
  align-items: center;
  gap: 8px;

  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 10px;

  opacity: 0.95;
} 
.row {
  display: flex;
  justify-content: space-between;
  padding: 12px 10px;
  border-radius: 12px;
  transition: 0.2s;
  color: rgba(255,255,255,0.85);
  padding-right: 20px;
} 
.row:hover {
  background: rgba(255,255,255,0.08);
  transform: translateX(4px);
} 
.row span:last-child {
  font-weight: 700; 
  color: #fff;
} 
.my-user {
  margin-top: 12px;

  background: linear-gradient(
	90deg,
	rgba(233,108,144,0.45),
	rgba(233,108,144,0.12)
  );

  border: 1px solid rgba(233,108,144,0.6);

  font-weight: 700;
  color: #fff;

  box-shadow:
	0 0 0 1px rgba(233,108,144,0.7),
	0 0 20px rgba(233,108,144,0.5),
	0 0 40px rgba(233,108,144,0.3);
}
.icon_user_coin {
  position: absolute;
  top: 65px;
  left: 20px;

  width: 20px;
  height: 20px;

  background: url('../images/icon/coin.png') center/contain no-repeat;
}

.users_chat {
	display: none; 
	position: relative;   /* краще ніж absolute */
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;     /* 🔥 гарантія висоти */
	z-index: 999;
	overflow-y: auto; 
	/* 🔥 приховує скрол в Firefox */
	scrollbar-width: none;
	/* 🔥 плавний скрол на iOS */
	-webkit-overflow-scrolling: touch;
}  
.chats { 
  height: calc(100% - 100px);
  display: flex;
  flex-direction: column;
  padding: 16px; 
} 
.chat-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: white;
  font-size: 14px;
  opacity: 0.8; 
} 
.txt_livechat {
	color: #FF3B5D;
	font-size: 16px;
	font-family:'Nunito',sans-serif;
	font-weight:700; 
	letter-spacing: -0.3px;
}
.txt_livechat::before {
  content: "●";
  color: #FF3B5D;
  margin-right: 6px;

  animation: blink 1.2s infinite;
}

@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0.2; }
  100% { opacity: 1; }
}
.online {
  color: #00ff99;
} 
.chat-body {
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}  
.chat-body::-webkit-scrollbar {
  display: none;
} 
.msg {
	display: inline-block;        /* 🔥 головне */
	width: fit-content;           /* під текст */	
	min-width: 150px;	
	max-width: calc(100% - 20px);
	margin-left: 10px;
	margin-bottom: 10px;
	padding: 12px;
	color: white;

	border-radius: 16px;
	background: rgba(255,255,255,0.04);

	transition: 0.25s;
	animation: msgIn 0.3s ease;

	word-wrap: break-word;
}
.msg:hover {
  transform: translateX(4px); 
} 
.msg_text {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px; 
} 
.name {
  font-size: 12px;
  opacity: 0.7;
} 
.chat_time {
	font-size: 12px;
	text-align: right;
	  opacity: 0.5;
}
.text {
  font-size: 14px;
} 
.badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
}  
.msg.normal { 
	max-width: 75%
} 
.msg.premium {
	border: 1px solid rgba(140,0,255,0.6);
	box-shadow: 0 0 25px rgba(140,0,255,0.4); 
	background: linear-gradient(135deg, #a855f7, #7c3aed);
	width: calc(100% - 40px);
}
.msg.myself {
	background: #5865F2; 
}  
.msg.pinned {
	margin-top: 10px;
	border: 1px solid rgba(255,80,80,0.7);
	box-shadow: 0 0 30px rgba(255,80,80,0.6);
	background: linear-gradient(135deg, #ff4d4d, #ff1a1a);  
	width: calc(100% - 40px);
	animation: pulseGlow 1.2s infinite alternate;
} 
.chat-input {
  margin-top: 10px;
} 
.chat-input input {
  width: calc(100% - 28px);
  padding: 10px 14px;
  margin-bottom: 8px;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);

  background: rgba(255,255,255,0.05);
  color: white;

  outline: none;
} 
.chat-actions {
  display: flex;
  height: 36px;
  gap: 6px;
} 
.chat-actions button {
  flex: 1;
  padding: 8px;

  border-radius: 10px;
  border: none; 
  cursor: pointer;
  font-family:'Nunito',sans-serif;
  font-weight:700;
  font-size: 14px;
  letter-spacing: -0.3px;
  
  padding: 8px 16px;
  cursor: pointer;
 
} 
@keyframes pulseGlow {
  0% {
	transform: scale(1);
	box-shadow: 0 0 20px rgba(255,80,80,0.5);
  }

  100% {
	transform: scale(1.02);
	box-shadow: 0 0 40px rgba(255,80,80,0.9);
  }
}

/* іконка */
.icon_send_coin {
	width: 18px;
	height: 18px;

	background: url('../images/icon/coin.png') center/contain no-repeat;
}
.button_send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	background: linear-gradient(180deg, #ffffff, #eaeaea);
	color: #766;

	border: 2px solid #B6AFA9;
	border-top: 1px solid #B6AFA9;
	border-bottom: 3px solid #B6AFA9;

	box-shadow: #B6AFA9 0px 4px 2px, #000 0px 8px 5px;

	text-shadow:
		-1px -1px 0 white,
		1px -1px 0 white,
		-1px 1px 0 white,
		1px 1px 0 white;

	
}
.button_send:hover { 
	margin-top: -1px;
	box-shadow: #B6AFA9 0px 5px 2px, #000 0px 8px 5px;
	opacity: 1;
} 
.button_send:active {  
	margin-top: 2px;
	box-shadow: #B6AFA9 0px 3px 2px,#000 0px 3px 5px;
} 
 
.button_premium {	
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px; 
	
	border: 2px solid #6f08d1;
	border-top: 1px solid #6f08d1;
	border-bottom: 3px solid #6f08d1;
	
	box-shadow: #54089c 0px 4px 2px, #000 0px 8px 5px;
	
	text-shadow:
	-1px -1px 0 #6f08d1,
	1px -1px 0 #6f08d1,
	-1px 1px 0 #6f08d1,
	1px 1px 0 #6f08d1;
	background: linear-gradient(135deg, #a855f7, #7c3aed);
	color: white;
} 
.button_premium:hover { 
	margin-top: -1px;
	box-shadow: #54089c 0px 5px 2px, #000 0px 8px 5px;
	opacity: 1;
} 
.button_premium:active {  
	margin-top: 2px;
	box-shadow: #54089c 0px 3px 2px,#000 0px 3px 5px;
}  

.button_pinned {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	
	color: #766;
	
	background: linear-gradient(135deg, #ff4d4d, #ff1a1a);
	border: 2px solid #a70505;
	border-top: 1px solid #a70505;
	border-bottom: 3px solid #a70505;
	
	box-shadow: #a70505 0px 4px 2px, #000 0px 8px 5px;
	
	text-shadow:
	-1px -1px 0 #c81212,
	1px -1px 0 #c81212,
	-1px 1px 0 #c81212,
	1px 1px 0 #c81212; 
	color: white;
} 
.button_pinned:hover { 
	margin-top: -1px;
	box-shadow: #a70505 0px 5px 2px, #000 0px 8px 5px;
	opacity: 1;
} 
.button_pinned:active {  
	margin-top: 2px;
	box-shadow: #a70505 0px 3px 2px,#000 0px 3px 5px;
} 
@keyframes msgIn {
  from {
	opacity: 0;
	transform: translateY(10px);
  }
  to {
	opacity: 1;
	transform: translateY(0);
  }
}  

.wallet {
	display: none; 
	position: relative;   /* краще ніж absolute */
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;     /* 🔥 гарантія висоти */
	z-index: 999;
	overflow-y: auto; 
	/* 🔥 приховує скрол в Firefox */
	scrollbar-width: none;
	/* 🔥 плавний скрол на iOS */
	-webkit-overflow-scrolling: touch;  
} 
.wallet::-webkit-scrollbar {
		display: none;
} 
.bbalance {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;

	font-size: 40px;
	font-weight: bold;
}
.icon_wallet_coin {   
	width: 30px;
	height: 30px;
	background: url('../images/icon/coin.png') center/contain no-repeat;
}
.button_sync {
	position: absolute;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px; /* відстань між іконкою і текстом */
	height: 36px;
	border-radius:10px;
	width: 240px;
	border:none;
	font-weight:700;
	cursor:pointer;
	font-family:'Nunito',sans-serif;
	font-size: 16px; 
	color:white; 
	display:flex;
	align-items:center;
	justify-content:center;
	gap: 8px; 
	background:#5865f2;
	border: 2px solid #2732aa;
	border-top: 1px solid #2732aa;
	border-bottom: 3px solid #2732aa;
	box-shadow: #2732aa 0px 7px 2px, #000 0px 8px 5px;
	text-shadow:
	-1px -1px 0 #2732aa,
	1px -1px 0 #2732aa,
	-1px 1px 0 #2732aa,
	1px 1px 0 #2732aa;
}
.button_sync:hover { 
	top: 59px;
	box-shadow: #2732aa 0px 8px 2px, #000 0px 8px 5px;
	opacity: 1;
} 
.button_sync:active {  
	top: 64px;
	box-shadow: #2732aa 0px 3px 2px,#000 0px 3px 5px;
}  
.icon_google {  
	display: block; 
	width: 20px;
	height: 20px;
	background: url('../images/icon/google.png') center/contain no-repeat;

	filter: drop-shadow(0 0 2px #2732aa);
}

.categories_row {
	width: 100%; 
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.category_card {
	position: relative;
	flex: 1 1 0;
	max-width: 280px;

	aspect-ratio: 1 / 1; /* 🔥 ГОЛОВНЕ */

	border-radius: 16px;
	overflow: hidden;

	transition: transform 0.3s ease;
}

.category_card:hover {
	cursor: pointer;
	transform: scale(1.12);
}

.category_card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.category_overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 14px;
	background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
} 
.category_status {
	display: flex;
	position: relative; 
	top: 8px; 
	align-items: center;
	justify-content: center;
	gap: 5px; /* відстань між іконкою і текстом */
	margin: 0 auto;
	background: #ff4f7c;
	border-radius: 10px; 
	height: 30px;
	text-align: center;
	line-height: 30px;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 700;
	color: white;
	text-shadow:
	-1px -1px 0 #a52848,
	1px -1px 0 #a52848,
	-1px 1px 0 #a52848,
	1px 1px 0 #a52848;
	font-family:'Nunito',sans-serif;
	font-weight:700; 
	letter-spacing: -0.3px;
}
.icon_coin_categ { 
	width: 18px;
	height: 18px;
	background: url('../images/icon/coin.png') center/contain no-repeat;
	filter: drop-shadow(0 0 1px rgb(153, 9, 9));
}
.lock {
	box-shadow: 0 0 12px rgba(255, 79, 124, 0.6);
	border: 2px solid rgba(255, 79, 124, 0.5);
}
.unlock {
	box-shadow: 0 0 12px rgba(74, 172, 70, 0.6);
	border: 2px solid rgba(74, 172, 70, 0.5);
}




.display_none { display: none; }
@media (min-width:1300px) {
	  .ad_left { top: 0px; }
	  .ad_right { top: 0px; }
 }
@media (max-width:1150px) {
	.ad_left { left: -320px; }
	.ad_right { right: -320px; }
	.battle_video {   
		min-height: 300px;
	}
}
@media (max-width:1050px) {
	.ad_left { left: -300px; }
	.ad_right { right: -300px; }
	.menu_row {
		width: calc(50% + 60px);   
	}
}
@media (max-width:1000px) {
	.ad_left { display: none; }
	.ad_right { display: none; }
	.battle_block {  
		width: calc(44% + 60px); 
	}
}
@media (max-width:900px) { 
	.battle_block {  
		width: calc(50% + 60px);   
	} 
}
@media (max-width:850px) { 
	.battle_block {  
		width: calc(52% + 60px);   
	} 
} 
@media (max-width:750px) { 
	.battle_block {  
		width: 70%;   
	} 
}  
@media (max-width:680px) { 
	.battle_block {  
		width: 100%;   
	}
	#menu_m {
		display: none; 
	} 
	#bottom_menu {
		position: fixed;
		bottom: 10px;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-around; /* рівномірно */
		align-items: center;
		z-index: 999;
	}
	.chat,
	.bonus,
	.rating,
	.coinbag {
		bottom: 0; left: 0; right: 0;
		position: relative; /* або просто видалити fixed */
		transform: scale(0.9);
	}
	.vs {
		position: absolute;
		display: block;
		 bottom: 0px;
		 left: 50%;
		 transform: translate(-50%, -50%);
		 width: 60px;
		 aspect-ratio: 1/1;
		 background: url('../images/icon/minivs.png') center center / contain no-repeat;
		 filter: drop-shadow(0 8px 18px rgb(88,101,242));
		 z-index: 999;
	} 
	.chats { 
		height: calc(100% - 200px);
		display: flex;
		flex-direction: column;
		padding: 16px; 
	} 
	.battle_result { 
		position:absolute;
		width: 100%; height: 100%; 
	}
    .glass_box {
		top: 20%;
		left: 0%;
		transform: translate(-0%, -20%);
	}
	.vote_btn {
		bottom: -50px; 
	}
	.battle_signature { 
		 bottom: -100px; left: 0; 
	}
	.vs { 
		bottom: -70px;
	}
	.vote_left:hover {
		bottom: -48px; 
		box-shadow: #2732aa 0px 9px 2px, #000 0px 8px 5px;
	}
	.vote_right:hover {
		bottom: -48px; 
		box-shadow: #a52848 0px 9px 2px, #000 0px 8px 5px;
	}
	.vote_left:active { 
		bottom: -54px;
		box-shadow: #2732aa 0px 3px 2px,#000 0px 3px 5px;
	  }
	.vote_right:active { 
		bottom: -54px;
		box-shadow: #a52848 0px 3px 2px,#000 0px 3px 5px;
	}
} 
 
/*  @media (max-width:768px){
 		
	
	.mobile_rek {
		  display: block;
	  }

 
 } */