/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
@media (orientation: portrait)
{
.layout 
{
/*height: 100vh;*/
}
}
@media (orientation: landscape)
{
.layout 
{
/*height: 50vw;*/
}
}

.page-layout 
{
display: grid;
grid-template-rows: 1fr 9fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
/*place-items: center;*/
height: 100vh;
background: linear-gradient(180deg,#f5f1e8 0%,#e9e2d4 100%);
}

.center-cell 
{
grid-row: 2;
grid-column: 2;
align-self: center;         /*центрирует один конкретный flex- или grid-элемент вдоль поперечной оси контейнера.*/
aspect-ratio: 1 / 1;        /*делает квадрат Высота берётся из строки грида (7fr) aspect-ratio: 1/1 делает ширину равной высоте*/
                            /*если убрать, то картинка станет по высоте примерно на треть от высоты*/
max-width: 90vh;            /* ограничение по высоте */
/*height: 100%;             /*если убрать, картинка уменьшится, шары останутся, тк center-cell и hant-wrapper сразу резко уменьшатся*/
width: 100%;                /*замена этим убирает искажение при ресайзе, теперь зависит от ширины, не от высоты*/
position: relative;         /*для дочерних */

min-width: 280px;
min-height: 280px;
}

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

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

.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;
justify-content: center;
}

.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);
}

.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);
border-radius: 50%;
}

.login
{
display:none;
/*position: absolute;          /* привязываем к .center-cell */
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);
border-radius: 50%
}

.login.show 
{
display: block;
}

.circle-content 
{
display: flex;
/*flex-direction: column;
align-items: center;
justify-content: center;
gap: 6%;
width: 80%;
text-align: left;*/
}

.circle-icon 
{
width: 30%;
height: auto;
/*flex-shrink: 0;       /*чтобы не сжималась при маленьких размерах*/
}

.circle.login {
    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: 35%;
    height: auto;
    object-fit: contain;
}

.login-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 65%;
    gap: 8%;
}

.login-form input {
    width: 100%;
    padding: 8%;
    font-size: 1em;
    box-sizing: border-box;
}

.forgot {
    font-size: 0.9em;
    text-align: center;
    text-decoration: none;
}

.login-form input {
    font-size: var(--circle-font);
}

.forgot {
    font-size: calc(var(--circle-font) * 0.8);
}

.circle-title {
    font-size: calc(var(--circle-font) * 1.1);
}

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

.circle-title 
{
font-weight: 600;
color: #fff4a3;
font-size: 1.5rem;
}

.circle-link 
{
text-decoration: none;
color: #ffe066;
font-size: 1.5rem;
transition: 0.2s ease;
cursor: pointer;
}

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



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

.bus 
{
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}

/* overlay, позиционируем через JS */
.overlay 
{
position: absolute;
width: 20vh; /* можно менять размер */
height: auto;
bottom: 0; /* привязка к нижнему краю */
right: 0;  /* привязка к правому краю */
}

.meteor 
{
position: absolute;
width: 25vh; /* можно менять размер */
height: auto;
bottom: 0; /* привязка к нижнему краю */
/*right: 0;  /* привязка к правому краю */
}

.bookblu  
{
position: absolute;
width: 25vh; /* можно менять размер */
height: auto;
}

.bookred  
{
position: absolute;
width: 12vh; /* можно менять размер */
height: auto;
left: 0;
}

@media (min-width: 2400px) 
{
    .page-layout 
{
grid-template-rows: 1fr 4fr 1fr;
grid-template-columns: 1fr 4fr 1fr;
}
}