html, body{
	width: 100%;
	height: 100%;
	overflow: hidden;
    }
   * {
	user-select: none; /* Забороняє виділення тексту для всіх елементів */
    }

        #c1 {
            position: absolute;	    
            top: 0;
            left: 0;
        }
        #c2 {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        #c3 {
            position: absolute;	    
            top: 0;
            right: 0;
        }
        #c4 {
            position: absolute;	    
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
        #c5 {
            position: absolute;	    
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        #c6 {
            position: absolute;	    
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }
        #c7 {
            position: absolute;
            bottom: 0;
            left: 0;
        }
        #c8 {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        #c9 {
            position: absolute;
            bottom: 0;
            right: 0;
        }


    .empty, .zero, .cross {
	width: clamp(4.063rem, 1.625rem + 8.67vw, 8.125rem);	/* width: 130px; */	
	height: clamp(4.063rem, 1.625rem + 8.67vw, 8.125rem);	/* height: 130px; */

	background-color: white;
        border: 0px solid blue;
	cursor: pointer;
	transition: background-image 1s ease-in-out;

	background-size: cover; /* Або use 'contain' depending on the desired behavior */
	background-position: center; /* Optional, ensures the image is centered */
	background-repeat: no-repeat; /* Ensures the image does not repeat */
    }
    .zero, .cross{	
	cursor: auto;  /* cursor: not-allowed; */ 
    }
    .empty{
	background-image: url("xo_empty.png");
    }
    .zero{
	background-image: url("xo_zero.png");
    }
    .cross{
	background-image: url("xo_cross.png");
    }
    label{	
	font-size: clamp(0.563rem, 0.358rem + 1.02vw, 1.125rem); /* font-size: 18pt; */
    }
    .info{
	width: clamp(12.5rem, 7.955rem + 22.73vw, 25rem);	 	/*width: 400px;*/
	height: clamp(1.563rem, 0.994rem + 2.84vw, 3.125rem);		/*height: 50px;*/
	text-align: center;	
	font-size: clamp(0.875rem, -0.288rem + 4.13vw, 2.813rem);	/* font-size: 30pt; */
        border: 0px solid grey;	
    }
    .gr{
	background-color: #DDD;
    }
    .F5{
	width: clamp(12.5rem, 7.955rem + 22.73vw, 25rem);	 	/*width: 400px;*/
	height: clamp(1.563rem, 0.994rem + 2.84vw, 3.125rem);		/*height: 50px;*/
	text-align: center;	
	font-size: clamp(0.625rem, 0.063rem + 2vw, 1.563rem);		/* font-size: 20pt; */
        border: 0px solid grey;
	width: fit-content;
	cursor: pointer;	
    }

    .m1m{
	display: inline-block;
	position: relative;
	border: 0px solid grey;
	width: 60px;  /* 60 */ 
	height: 20px;  /* 20 */
	font-size: clamp(0.5rem, 0.318rem + 0.91vw, 1rem); /* 16 */
	text-align: center;
	vertical-align: middle;
	line-height: 20px;       /* The same as your div height */
	border-radius: 15%;
	cursor: pointer;
	background-color: #EEF;
    }
    .m1m:hover{
	background-color: #DDE;
    }

/*стили контейнера*/
.AI_word{
	font-size: clamp(0.5rem, 0.318rem + 0.91vw, 1rem); /* 16 */
}
.switch {
    display: inline-block;
    position: relative;
    width: clamp(0.938rem, 0.597rem + 1.7vw, 1.875rem);  /* 30 */ 
    height: clamp(0.5rem, 0.295rem + 1.02vw, 1.063rem);  /* 17 */
    /* background-color: red; /*временно*/
}

/*скрыть стандартное оформление checkbox*/
.switch__input {
    height: 0;
    width: 0;
    opacity: 0;
}

/*слайдер*/
.switch__slider {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: clamp(0.5rem, 0.295rem + 1.02vw, 1.063rem); /* 17 */
    background-color: #ccc;
    transition: 0.4s;
}

.switch__slider:before {
    content: "";
    position: absolute;
    cursor: pointer;
    left: clamp(0.063rem, 0.04rem + 0.11vw, 0.125rem);		/* 2 */
    bottom: clamp(0.063rem, 0.04rem + 0.11vw, 0.125rem);	/* 2 */
    height: clamp(0.375rem, 0.216rem + 0.8vw, 0.813rem);	/* 13 */
    width: clamp(0.375rem, 0.216rem + 0.8vw, 0.813rem); 	/* 13 */
    border-radius: 50%;
    background-color: white;
    transition: 0.4s;
}

/*стили при выборе флага компонента*/
.switch__input:checked + .switch__slider {
    background-color: #2196f3;
}

.switch__input:checked + .switch__slider:before {   
    transform: translateX(clamp(0.375rem, 0.216rem + 0.8vw, 0.813rem));			/* 13 */
    -webkit-transform: translateX(clamp(0.375rem, 0.216rem + 0.8vw, 0.813rem));		/* 13 */
    -ms-transform: translateX(clamp(0.375rem, 0.216rem + 0.8vw, 0.813rem));		/* 13 */
}


/* Стилі для затемнення екрану і спінера */
#grey_canvas {
  position: fixed;
  width: 100%;
  height: 100%;	/* 0% - 100% */
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6); /* затемнення */
  z-index: 555; /* зверху всіх інших елементів */
  display: flex;
  /*display: none;*/
}

/* Стилі для спінера */
    .wrapper, .container, .spinner, .blocker {
	width:  clamp(12.5rem, 5rem + 26.67vw, 25rem);	/*width: 400px;*/
	height: clamp(12.5rem, 5rem + 26.67vw, 25rem);	/*height: 400px;*/
    }
    .wrapper {
	position: relative;
    }
    .container {
	position: absolute;
	background-image: radial-gradient(black, grey, grey, grey, white, white, white);
    }

.spinner {  
  position: absolute;
  box-sizing: border-box;    
  border:  clamp(0.375rem, 0.239rem + 0.68vw, 0.75rem) solid #f3f3f3;	 /* світлий колір */		/* 12px */
  border-top: clamp(0.375rem, 0.239rem + 0.68vw, 0.75rem) solid #3498db; /* колір спінера */		/* 12px */
  z-index: 777; /* зверху всіх інших елементів */
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

.blocker {  
  position: absolute;
  background: blue;
  opacity: 0.05;
  box-sizing: border-box;   
  z-index: -1;
  /*cursor: none;*/
}

/* Анімація спінера */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}