/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/

.index-grid
{
background: linear-gradient(180deg,#f5f1e8 0%,#e9e2d4 100%);
}

.page-layout                /*весь модуль (на всю страницу)*/
{
display: grid;
height: 100vh;   /* лучше чем 100vh для мобильных */
width: 100%;
}

.slogan-one 
{
grid-row: 1;                /*ячейка в 1м ряду*/
grid-column: 2;             /*и второй строке*/

min-height: 0;
min-width: 0;

display: grid;              /* вместо flex */
place-items: center;        /* центр по горизонтали и вертикали */
}

.scripta
{
width: 90%;
height: auto;
object-fit: contain;   /* ВПИСЫВАЕТСЯ внутрь */
object-position: center;
display: block;
}

/*.slogan-t { font-size: 11cqw; }
.slogan-m { font-size: 9cqw; }
.slogan-b { font-size: 11cqw; }*/

.gap-cell
{
grid-row: 2;                /*ячейка в 1м ряду*/
grid-column: 2;             /*и второй строке*/   

min-height: 0;
min-width: 0;

display: flex;
justify-content: left;  /* по горизонтали */
align-items: center;      /* по вертикали */ 
}

.logos 
{
width: 60%;
height: auto;
object-fit: contain;
display: block;
margin-bottom: 1rem;
}

.center-cell 
{
grid-row: 3;                /*ячейка во втором ряду*/
grid-column: 2;             /*и второй строке*/
aspect-ratio: 1 / 1;        /*делает квадрат Высота берётся из строки грида (7fr) aspect-ratio: 1/1 делает ширину равной высоте*/
                            /*если убрать, то картинка станет по высоте примерно на треть от высоты*/
position: relative;         /*для дочерних */

min-width: 140px;
min-height: 140px;

align-self: center;         /*центрирует один конкретный flex- или grid-элемент вдоль поперечной оси контейнера.*/
justify-self: center;       /*выравнивает элемент по центру внутри его собственной ячейки сетки (grid area) по горизонтальной (строчной) оси*/
width: min(80vw, 80vh);

margin-bottom: clamp(10px, 7vw, 60px);
}

.float                      /*класс для картинок*/
{
position: fixed;            /* важно — чтобы не зависело от layout/grid */
height: auto;
pointer-events: none;
z-index: 100;
}

/*/////////////////////////////////////////////////////////////////////////*/

.hant-wrapper 
{
position: absolute; /* привязываем к .center-cell */
z-index: 10;
inset: 0;           /*это сокращение top:0; bottom:0; left:0; right:0 */
width: 100%;
height: 100%;
pointer-events:none;
}

.hant-wrapper img  
{
width: 100%;
height: 100%;
max-width: none;      /* отключаем ограничения */
max-height: none;
object-fit: contain;    /* заполняет весь квадрат */
display:none;
}

.hant
{
position: absolute; 
}

.hant-svg
{
width:100%;
height:100%;
display:block;
}

.hant-svg circle,
.hant-svg path
{
stroke-width:1.2;
vector-effect:non-scaling-stroke;
}

/*/////////////////////////////////////////////////////////////////////////*/

.circle 
{
position: absolute;
z-index: 20;
height: 45%;                        /*45% высоты ячейки*/
aspect-ratio: 1;                    /*При width: 100% и aspect-ratio: 1/1 элемент станет квадратом, ширина которого равна ширине контейнера.*/
                                    /*Если заданы и width, и height свойство aspect-ratio игнорируется.*/
border-radius: 50%;

display: flex;
align-items: center;

overflow: visible;                  /*эти три свойства чтобы правый кргу не искажался*/
min-width: 0;
min-height: 0;
}

.top-right 
{
top: 0;
right: 0;
background: radial-gradient(circle at 45% 45%,#df3b1a 0%,#c92c12 55%, #c3240e 100%);
box-shadow:inset -1px -1px 3px rgba(0,0,0,0.08);
text-align: right;
justify-content: center;
/*padding-right:calc(var(--circle-font) * 1.3) ;*/
}

.bottom-left 
{
bottom: 0;
left: 0;
background: radial-gradient(circle at 45% 45%, #9fbe05 0%, #8aad04 55%, #81a503 100%);
box-shadow:inset -1px -1px 3px rgba(0,0,0,0.08);
text-align: left;
justify-content: center;
/*padding-left:calc(var(--circle-font) * 1.3) ;*/
}

.login
{
display:none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* центрируем */
background: radial-gradient(circle at 45% 45%,#5b6f8a 0%,#4f637e 55%,#485c76 100%);
box-shadow: inset -1px -1px 3px rgba(0,0,0,0.08);
z-index: 300;
}

.login.show 
{
display: block;
}



.site-lang
{
display:none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* центрируем */
background: radial-gradient(circle at 45% 45%,#5b6f8a 0%,#4f637e 55%,#485c76 100%);
box-shadow: inset -1px -1px 3px rgba(0,0,0,0.08);
z-index: 300;
}

.site-lang.show 
{
display: block;
}

.circle-content         
{
display: flex;          /*чтобы содержимое кругов рисовалось над кругами*/
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}

.circle-items 
{
position: relative;
width: 100%;
height: 100%;
}

.center-icon 
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

width: 30%;     /* масштаб от круга */
height: auto;

z-index: 5;     /* ниже мини-кругов */
pointer-events: none; /* чтобы не мешала кликам */
}

/* маленькие круги */
.mini-circle 
{
position: absolute;
top: 50%;
left: 50%;

width: 40px;
height: 40px;
border-radius: 50%;

background: orange;
transform-origin: center;
}

.mini-circle 
{
background: transparent;
border: 2px solid rgba(255,255,255,0.9);
box-shadow: 0 0 6px rgba(255,255,255,0.4);
transition: all 0.2s ease;
}

.mini-circle:hover 
{
background: rgba(255,255,255,0.15);
transform: scale(1.1);
}

.mini-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* важно! */
    border-radius: 50%;
}

/*/////////////////////////////////////////////////////////////////////////*/

.circle-text-block
{
display: flex;
flex-direction: column;
gap: 6%;
width: 80%;
white-space: nowrap;
}

.bottom-left .circle-text-block
{
transform: translateX(calc(var(--circle-font) * 1.2));
text-align: left;
}

.top-right .circle-text-block
{
align-items: flex-end;
transform: translateX(calc(var(--circle-font) * -0.2));
text-align: right;
}

.circle-title 
{
font-weight: 600;
color: #fff4a3;
/*font-size: 1.5rem;*/
font-size: calc(var(--circle-font) * 1.3);
}

.circle-link 
{
text-decoration: none;
color: #ffe066;
font-size: calc(var(--circle-font) * 1.3);
transition: 0.2s ease;
cursor: pointer;
}

.circle-link:hover 
{
color: #fff8b5;
}

.lang-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-icon svg 
{
width: 40px;
height: 40px;
}

/*/////////////////////////////////////////////////////////////////////////*/

.circle.login 
{
position: absolute;     
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

.login-content              /*содержимое круга логина*/
{
/*display: flex;*/
align-items: center;
justify-content: center;
height: 100%;
padding: 10%;
box-sizing: border-box;
}

.spy                        /*картинка шпиона*/
{
width: 30%;
height: auto;
object-fit: contain;
margin-left: -1rem;
}

.mom                        /*картинка */
{
width: 40%;
height: auto;
object-fit: contain;
margin-left: -1rem;
}

.circle-form                 /*форма с 4мя кнопками для логина*/
{
display: flex;
flex-direction: column;
justify-content: center;
width: 65%;
}

.login-form                 /*форма с 4мя кнопками для логина*/
{
height: 90%;
}



.register-form
{
height: 75%;
}

.circle-form .forgot
{
padding: 8%;
}

.circle-form .field {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* input занимает всё место внутри field */
.circle-form input {
    width: 100%;
    height: 100%;
    background: #ffffff;
    border: none;
    border-radius: 12px;
    text-align: center;
    font-size: var(--circle-font);
    color: #222;
    box-sizing: border-box;
}

/* кнопка */
.circle-form button {
    flex: 1;
    width: 100%;
    background: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: var(--circle-font);
    cursor: pointer;
}

/* текст ошибки — маленький */
.error-text {
    height: 12px;
    font-size: 10px;
    color: red;
    text-align: center;
}

.input-error {
    border: 2px solid #ff4d4d !important;
    color: #ff4d4d;
}

.input-ok {
    border: 2px solid #4dff88 !important;
}

.error-text {
    height: 14px;
    font-size: 11px;
    text-align: center;
}



/* глаз */
.password-field {
    position: relative;
}

.password-field input {
    width: 100%;
    padding-right: 30px;
}

.toggle-password {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 14px;
}




.input-error {
    border: 2px solid #ff4d4d !important;
    color: #ff4d4d;
}

.input-ok {
    border: 2px solid #4dff88 !important;
}

.error-text {
    height: 12px;
    font-size: 10px;
    color: #ff4d4d;
    text-align: center;
}

.circle-form input, .login-btn, .forgot, .register-btn 
{
width: 100%;
background: #ffffff;
border: none;
border-radius: 12px;
box-sizing: border-box;
text-align: center;
font-size: var(--circle-font);
color: #222;
}

.login-btn 
{
cursor: pointer;
transition: 0.2s ease;
}

.login-btn:hover 
{
background: #f0f0f0;
}

.circle-form input,
.circle-form button 
{
    flex: 1;             /* Делят высоту */
    min-height: 0;       /* Чтобы могли сжиматься */
    width: 100%;
    padding: 0;          /* УБИРАЕМ большой padding */
    border: none;
    text-align: center;
    font-size: var(--circle-font);
    box-sizing: border-box;
}

.forgot 
{
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: calc(var(--circle-font) * 0.8);
}

/* Убираем дефолтный стиль input */
.circle-form input:focus 
{
outline: none;
box-shadow: 0 0 0 2px #ffe066;
}

:root 
{
    --login-scale: 1;
}


.field {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.error-text {
    color: #ff4d4d;
    font-size: 0.7em;
    height: 1em;
    text-align: center;
}

.input-error {
    border: 2px solid #ff4d4d !important;
    color: #ff4d4d;
}

.password-field {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
}

/*/////////////////////////////////////////////////////////////////////////*/

.close-circle-kid 
{
position: absolute;
border-radius: 50%;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
width: 28%;                 /*задавая такие параметры 28 и 9% получаем касние круга с крестом к большому кругу*/
height: 28%;
top: -9%;
right: -9%;
}

.cross-line-kid 
{
position: absolute;
width: 50%;
height: 8%;
background: #222;
}

.cross-line-kid:first-child 
{
transform: rotate(45deg);
}

.cross-line-kid:last-child 
{
transform: rotate(-45deg);
}

/*/////////////////////////////////////////////////////////////////////////*/

.slogan-one
{
font-family: "Fredoka One (RUS BY ME)"; 
font-weight: 700;
color: #fbe708; /*цвет текста*/
text-align: center;
-webkit-text-stroke: 2px #F90; /* Ширина и цвет контура */
text-stroke: 2px #F90; /* Для браузеров без префикса */ 
}

/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/

@media (orientation: portrait)
{

.hant-wrapper img 
{
display:none;
}

.hant-svg 
{
display:block;
}

.slogan-one 
{
display:block;
}

.page-layout                /*весь модуль (на всю страницу)*/
{
grid-template-columns: 1fr auto 1fr;
}

}


/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/

@media screen and (orientation: portrait) and (min-width: 360px) and (max-width: 409px) and (min-height: 0px) and (max-height: 549px) 
{

.slogan-t 
{ 
font-size: clamp(20px, 5vw, 60px);
}
.slogan-m
{ 
font-size: clamp(20px, 9vw, 60px);
}
.slogan-b
{ 
font-size: clamp(20px, 5vw, 60px);
}

.page-layout                /*весь модуль (на всю страницу)*/
{
grid-template-rows: auto 0.8fr auto 1fr;
}

.slogan-one
{
margin-top: 2vh;
}

}


/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/

@media screen and (orientation: portrait) and (min-width: 360px) and (max-width: 409px) and (min-height: 550px) and (max-height: 609px) /*Samsung S5*/
{

.slogan-t 
{ 
font-size: clamp(20px, 10vw, 60px);
}
.slogan-m
{ 
font-size: clamp(20px, 9vw, 60px);
}
.slogan-b
{ 
font-size: clamp(20px, 10vw, 60px);
}

.page-layout                /*весь модуль (на всю страницу)*/
{
grid-template-rows: auto 0.8fr auto 1fr;
}

.slogan-one
{
/*margin-top: 2vh;*/
}


}

/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/

@media screen and (orientation: portrait) and (min-width: 380px) and (max-width: 409px) and (min-height: 650px) and (max-height: 660px) /*Samsung A16*/
{

.slogan-t 
{ 
font-size: clamp(20px, 10vw, 60px);
}
.slogan-m
{ 
font-size: clamp(20px, 9vw, 60px);
}
.slogan-b
{ 
font-size: clamp(20px, 10vw, 60px);
}

.page-layout                /*весь модуль (на всю страницу)*/
{
grid-template-rows: auto 0.8fr auto 1fr;
}

.slogan-one
{
margin-top: 2vh;
}

}


/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/

@media (orientation: landscape)
{

.hant-wrapper img 
{
display:block;
}

.hant-svg 
{
display:none;
}

.slogan-one 
{
display:none;
}

.page-layout                /*весь модуль (на всю страницу)*/
{
grid-template-columns: 1fr auto 1fr;
grid-template-rows: auto 2fr auto 1fr;
}

}