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

body::-webkit-scrollbar 
{
width: 6px; 
}

body::-webkit-scrollbar-track 
{
background: orange;        /* цвет зоны отслеживания */
}

body::-webkit-scrollbar-thumb 
{
background-color: blue;    /* цвет бегунка */
border-radius: 20px;       /* округлось бегунка */
border: 3px solid orange;  /* отступ вокруг бегунка */
}

body 
{
scrollbar-width: 6px;          /* "auto" или "thin" */
scrollbar-color: orange #485c76;   /* цвет бегунка и зоны отслеживания */
}

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

html, body 
{
height: 100%;
}

.top-r 
{
height: 20vh;
}

.middle-r 
{
height: 60vh;
display: flex;
justify-content: center; /* центр по горизонтали */
}

.bottom-r 
{
height: 20vh;
}

/* --- центральная колонка --- */

.center 
{
position: relative;
width: 100%;
max-width: 1024px;
height: 100%;
max-height: 100%;
margin: 0 20px; /* боковые поля */
display: flex;
align-items: stretch;
}

/* --- рамка --- */

.frame 
{
width: 100%;
height: 100%;
max-height: 100%;
border: 0.5rem solid #485c76;
border-radius:2rem;
box-sizing: border-box;
padding: 40px 20px 20px;
background: #ffe6a4;
position: relative;
overflow: hidden; /* ничего не вылезает */
}

.frame-inner 
{
height: 100%;
padding: 40px 20px 20px;
box-sizing: border-box;
overflow-y: auto;   
overflow-x: auto;
}

/* --- мальчик --- */

.boy 
{
position: absolute;
top: 0;
left: 50%;
transform: translate(120%, -66%);
width: 120px;
height: auto;
z-index: 20;
}

/*///////////////////////////////треугольник////////////////////////////////////////////////////*/

/*https://dabblet.com/gist/4592062*/

.side-panel-narrow 
{
    position: fixed;
    left: 0.1rem;
    top: 45vh;
    width: clamp(3rem, 16vw, 18rem);
    z-index: 200;
}

.side-panel-narrow svg {
    width: 100%;
    height: 100%;
}

.sidebar
{
display:none;  
}

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

.acquaintance 
{
display: none;
}

.introduction-wrapper 
{
display: flex;
align-items: flex-start;
gap: 0rem;
margin-top: 10vh;
}

/* Вторая колонка — вертикальная */
.intro-center 
{
    display: flex;
    flex-direction: column;
    align-items: center; /* центрируем нижний относительно верхнего */
}

/* Отступ вниз */
.intro-day-h3 
{
margin-top: 1rem;
}

.introduction-text
{
margin-top: 8vh;
}

/* --- даёт фон, шрифт и чёрную границу вокруг блоков --- */

.names-table, .words-table, .expressions-table, .text-table, .translate-table, .info-table
{
/*display:table;*/
width:97%;
font-family: "EB Garamond", serif;
color: #000;
background:#ffeec0; /*background: #fff4d6; /* чуть мягче */

border: 3px solid #c28b2c;
font-weight:450;
border-radius: 1.5rem;
padding: 1rem 1.5rem; /* ← вот это нужно */
font-size:4vh;
}


.intro-day-h21 
{
font-family: "EB Garamond", serif;
background: linear-gradient(145deg, #fff8e1, #f4e7c5);
color: #3b2a1a;
border: 3px solid #c28b2c;
border-radius: 2rem;
padding: 0.1rem ;
line-height: 1.75;
position: relative;
box-shadow:
0 12px 25px rgba(0,0,0,0.12),
inset 0 0 40px rgba(255,255,255,0.5);

text-align: center;
white-space: nowrap;
font-size: 5vh;
font-weight: 700;
color: #ff9f1c;
text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

.intro-day-h21::after 
{
content: "";
display: block;
width: 10vw;
height: 2px;
background: linear-gradient(to right, transparent, #c28b2c, transparent);
margin: 0.8rem auto 0;
}



.intro-day-h22 
{
font-family: "EB Garamond", serif;
background: linear-gradient(145deg, #fff8e1, #f4e7c5);
color: #3b2a1a;
border: 3px solid #c28b2c;
border-radius: 2rem;
padding: 0.1rem ;
line-height: 1.75;
position: relative;
box-shadow: 0 12px 25px rgba(0,0,0,0.12), inset 0 0 40px rgba(255,255,255,0.5);
position: relative;
  
text-align: center;
font-size: 5vh;
font-weight: 700;
color: #00bf94;
text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

.intro-day-h22::after 
{
content: "";
display: block;
width: 120px;
height: 2px;
background: linear-gradient(to right, transparent, #c28b2c, transparent);
margin: 0.8rem auto 0;
}

.intro-day-h21:hover, .intro-day-h22:hover, .intro-day-h23:hover 
{
transform: translateY(-4px);
transition: 0.4s ease;
box-shadow: 0 18px 35px rgba(0,0,0,0.18), inset 0 0 50px rgba(255,255,255,0.6);
}


.intro-day-h23 
{
font-family: "EB Garamond", serif;
background: linear-gradient(145deg, #fff8e1, #f4e7c5); /* пергаментный фон */
color: #3b2a1a;
border: 3px solid #c28b2c;
border-radius: 2rem;
padding: 0.1rem ;
line-height: 1.75;
position: relative;
box-shadow: 0 12px 25px rgba(0,0,0,0.12), inset 0 0 40px rgba(255,255,255,0.5);

text-align: center;
font-size: 5vh;
font-weight: 700;
color: #d23232; /* бордово-красный цвет текста */
text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

.intro-day-h23::after 
{
content: "";
display: block;
width: 120px;
height: 2px;
background: linear-gradient(to right, transparent, #c28b2c, transparent);
margin: 0.8rem auto 0;
}

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







.intro-day-h3 {
    text-align: center;
    font-size: 4vh;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    color: #ff8c00;
    text-shadow:
        -2px -2px 0 #5a3a00,
         2px -2px 0 #5a3a00,
        -2px  2px 0 #5a3a00,
         2px  2px 0 #5a3a00,
         0 0 15px rgba(255,140,0,0.4);
}

.intro-day-h3::after {
    content: "";
    display: block;
    width: 120px;
    height: 2px;
    background: linear-gradient(to right, transparent, #c28b2c, transparent);
    margin: 0.8rem auto 0;
}




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

.sidebar 
{
background: transparent;   /* ← убрать фон */
position: fixed;
}

.close-menu 
{
position: sticky;
top: 0;
z-index: 10;
background: rgba(255, 120, 0, 0.9);
color: white;
border: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
padding-bottom: 14px;
}

.close-menu + .menu-item 
{
margin-top: 1rem;
}

.menu-item 
{
background: rgba(255, 255, 255, 0.85);
color: #c3240e; 
padding: 14px 18px;
margin-bottom: -0.5rem;
border-radius: 14px;
cursor: pointer;
font-weight: 600;
font-size:2rem ;
border: 0.3rem solid #ff870c;
transition: all 0.2s ease;
box-shadow: 0 4px 10px rgba(255,135,12,0.15);
}

.menu-item:hover 
{
transform: translateY(-2px);
box-shadow: inset -1px -1px 3px rgba(0,0,0,0.08), 0 6px 14px rgba(255,120,0,0.35);
color: #FFF; /* тёплый тёмно-оранжевый */
}

.submenu 
{
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
margin-bottom: 10px;
background: transparent; 
}

.submenu-item 
{
background: rgba(255, 255, 255, 0.85);
border: 0.3rem solid #81a503;
color: #81a503;
/*background: linear-gradient(145deg, #9fbe05, #81a503);*/
padding: 12px 18px;
margin: 6px 0 6px 15px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size:2rem ;
transition: all 0.2s ease;
box-shadow: inset -1px -1px 3px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.15);
}

.submenu-item:hover 
{
transform: translateX(3px);
box-shadow: inset -1px -1px 3px rgba(0,0,0,0.08), 0 5px 10px rgba(0,0,0,0.25);
color: white;
}


/*----------------------------------------------------------------------------------------------*/

.trx 
{
display:table-row;
}

.tr 
{
display:table-row;
width: auto;
}

.td 
{
display:table-cell; 
text-overflow: ellipsis;	/*Добавляет в конец обрезанного текста троеточие*/
overflow: hidden;		/*https://code.mu/ru/markup/manual/css/property/text-overflow/ */
}

.wrd
{
width: 35%;
}

.trscr
{
width: 30%;
padding-left:5px;
}

.trsl
{
width: 35%;
}

/*----------------------------------------------------------------------------------------------*/

em
{
color: #000;
font-style: normal;
font-weight:1000;
}

.red
{
color: #F00;
}

.blu
{
color: #6E83CE;
}

.u
{
text-decoration: underline;
}


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

[data-title] 			/*для всплывающей подсказки на слове*/
{
position: relative; 		/* Относительное позиционирование */ 
cursor: help; 			/* Меняем курсор на справочный */
}

[data-title]::after 
{
content: attr(data-title); 	/* Выводим текст из атрибута data-title */
position: absolute; 		/* Абсолютное позиционирование */
/*z-index: 10; */
left: 0; 
/*top: 1em;*/			/* Подсказка снизу */
bottom: 1.2em; 			/* Подсказка сверху */
opacity: 0; 			/* Скрываем подсказку, делая её прозрачной */
pointer-events: none; 		/* Подсказка не реагирует на курсор */
background: #83b3d3; 		/*rgba(57, 137, 201, 0.9); /* Синий цвет фона */
color: #fff; 			/* Белый цвет текста */
padding: 0.5em; 		/* Поля вокруг текста */

border: 1px solid #000;
border-radius: 10px;
font-family: "EB Garamond", serif;
font-size: 2.5rem;
}

[data-title]:hover::after, [data-title]:focus::after 
{
opacity: 1; /* Показываем подсказку */
}

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