/*///////////////////////////////////////////////////////////////////////////////////////////////////*/
/*.reader-bg {
  position: relative;
  z-index: 0;
  
}*/

.bg-svg 
{
position: fixed;   /* 👈 как background-attachment: fixed */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}

.reader-page .bg-svg 
{
  /*background: linear-gradient(180deg,#f5f1e8 0%,#e9e2d4 100%);*/
  background: linear-gradient(180deg, #efe7d6 0%, #d9ccb3 100%);
  /*background: linear-gradient(180deg, #e9eef2 0%, #d5dde5 100%);*/
  /*background: linear-gradient(180deg, #2b2f33 0%, #1a1d20 100%);*/
}

.ifrank-page .bg-svg 
{
  /*background: linear-gradient(180deg,#f5f1e8 0%,#e9e2d4 100%);*/
  /*background: linear-gradient(180deg, #efe7d6 0%, #d9ccb3 100%);*/
  /*background: linear-gradient(180deg, #e9eef2 0%, #d5dde5 100%);*/
  background: linear-gradient(180deg, #2b2f33 0%, #1a1d20 100%);
}


/* весь контент выше */
.reader-grid, #system-message-container 
{
position: relative;
z-index: 1;
}


.reader-grid, .ifrank-grid
{
/*background: linear-gradient(180deg,#2cbfc9 0%, #b0d235 30%,#f9c04d 100%);*/
/*background: linear-gradient(180deg,#f5f1e8 0%,#e9e2d4 100%);
z-index: -12;*/
}

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

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;   /* цвет бегунка и зоны отслеживания */
}

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

.reader-page
{
min-height:100dvh;
display:flex;
flex-direction:column;
}

html, body 
{
width: 100%;
min-width: 100%;
}

.middle-r .moduletable 
{
display: block !important;
width: 100% !important;
}

.top-r, .middle-r, .bottom-r 
{
width: 100%;
}

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

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

.center 
{
position: relative;
height: 100%;
max-height: 100%;

width: 100%;
max-width: 1024px;
margin: 0 auto;

display: flex;
align-items: stretch;
flex: 1;
}

.frame 
{
position: relative;
height: 100%;
max-height: 100%;

width: 100%;
min-width: 0;

display: flex;
flex-direction: column; 

margin: 0 auto;   /*центрирует*/

border: 0.5rem solid #485c76;
border-radius:2rem;
box-sizing: border-box;
background: #ffe6a4;
overflow: hidden; /* ничего не вылезает */
}

.frame-inner 
{
height: 100%;
min-width: 0;

padding-left: 2rem;
padding-right: 2rem;

box-sizing: border-box;   /*заставляет браузер включать padding и border в общую ширину (width) и высоту (height) элемента*/
overflow-y: auto;   
overflow-x: hidden;
}

.boy 
{
position: absolute;
top: 0;
transform:translate(90%, -66%);
width:clamp(60px, 12vw, 115px);
height: auto;
z-index: 20;
display: none;
}

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

.lessons, .stories 
{
display: none;
}

.introduction
{
margin-top: 0vh;   
}

.introduction-wrapper, .story-title-wrapper 
{
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-top: 10vh;
justify-content: center;
}

.story-title-wrapper 
{
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 10vh;
align-items: center;   /* центр по горизонтали */
justify-content: center; /* центр по вертикали */
}

.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
{
box-sizing: border-box;
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: clamp(18px, 6vh, 34px);
margin-top: 3.5rem;
/*overflow-wrap: anywhere;*/
}
.readerside-submenu-subitem.active-lesson
{
  background: #ffe082;
  font-weight: bold;
  border-radius: 6px;
}

.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: clamp(18px, 6vh, 34px);
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);
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);
white-space: nowrap;
  
text-align: center;

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); /* пергаментный фон */
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);
white-space: nowrap;
text-align: center;

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: clamp(18px, 5vh, 34px);
    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;
}

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

.names-wrap, .words-wrap, .expressions-wrap, .text-wrap, .translate-wrap, .info-wrap
{
position: relative;
}

.card-title 
{
position: absolute;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}

.title-orange 
{
background: orange; 
color: #4a2a00;
}

.title-orange-red 
{
background: orangered; 
color: #4a2a00;
}

.title-green 
{
background: green; 
color: #4a2a00;
}

.title-orchid
{
background: orchid; 
color: #4a2a00;
}

.title-green-blu 
{
background: linear-gradient(145deg, #1fd1a5, #00bf94);
}

.title-green-green 
{
background: linear-gradient(145deg, green, #7CFC00);
color: #063d1e; /* тёмно-зелёный текст вместо белого — выглядит богаче */
}

.title-green-light 
{
background: #00b84f; 
color: #4a2a00;
}

.title-rosa 
{
background: linear-gradient(180deg, #ff6b6b 0%, #d23232 100%);
color: #3a0000;
}

.title-red 
{
background: linear-gradient(145deg, #e35a5a, #d23232);
}

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

.page-navigation 
{
position: absolute;
inset: 0;
pointer-events: none;
z-index: 300;
}

.nav-arrow 
{
position: absolute;
top: 50%;
transform: translateY(-50%);
pointer-events: auto;

width: 48px;
height: 48px;
border-radius: 50%;
border: none;

background: rgba(0, 0, 0, 0.45);
color: #fff;
font-size: clamp(18px, 4vh, 34px);
cursor: pointer;

display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}

.nav-prev 
{
left: 10px;
}

.nav-next 
{
right: 10px;
}

.nav-arrow:hover 
{
background: rgba(0, 0, 0, 0.75);
transform: translateY(-50%) scale(1.1);
}

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

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

}

.sidebar-header 
{
position: sticky;
top: 0;
z-index: 10;
margin-bottom: 1rem;
}

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

.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, .frankside-menu-item, .readerside-menu-item, .frankside-submenu-item, .readerside-submenu-item, .frankside-submenu-subitem, .readerside-submenu-subitem 
{
direction: ltr;
background: rgba(255, 255, 255, 0.85);
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 10px rgba(255,135,12,0.15);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
position: relative;
}

.menu-item, .frankside-menu-item, .readerside-menu-item 
{
padding: 14px 18px;
margin-bottom: 0.5rem;
border-radius: 14px;

font-weight: 600;
font-size: clamp(18px, 4vh, 34px);
border: 0.3rem solid #ff870c;
color: #c3240e; 
}

.frankside-submenu-item, .readerside-submenu-item 
{
font-weight: 600;
font-size: clamp(18px, 4vh, 34px);
border-radius: 12px;

border: 0.3rem solid #81a503;
color: #81a503;
/*background: linear-gradient(145deg, #9fbe05, #81a503);*/
padding: 12px 18px;
margin-bottom: 0.5rem;
}

.frankside-submenu-subitem, .readerside-submenu-subitem 
{
font-weight: 600;
font-size: clamp(18px, 4vh, 34px);
padding: 12px 18px;
margin-bottom: 0.5rem;
/*margin: 6px 0 6px 15px;*/
border-radius: 12px;
border: 0.3rem solid #485c76;
color: #4f637e;
/*background: linear-gradient(145deg, #9fbe05, #81a503);*/
}

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

#menuTextOverlay 
{
  position: fixed;
  display: none;
  z-index: 99999;
  pointer-events: none;

  background: rgba(255, 255, 255, 0.85);

  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 600;
  font-size: clamp(18px, 4vh, 34px);
  white-space: nowrap;
  box-shadow: inset -1px -1px 3px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.15);
}

.menuTextOverlay-item 
{
border: 0.3rem solid #ff870c;
color: #c3240e;
}

.menuTextOverlay-subitem 
{
border: 0.3rem solid #81a503;
color: #81a503;
}

.menuTextOverlay-subsubitem 
{
border: 0.3rem solid #485c76;
color: #4f637e;
}

.submenu, .frankside-submenu 
{
direction: ltr;
/*max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;*/
margin-bottom: 10px;
background: transparent; 
}

.frankside-submenu 
{
  display: none;
}

.frankside-submenu.open 
{
display: block;
}

.frankside-submenu .frankside-submenu 
{
overflow: visible;
}

.menu-item:hover, .frankside-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-item:hover, .frankside-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: #c3240e;
}

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

.tr 
{
display: grid;
grid-template-columns: 35% 30% 35%;
gap: 1rem;
position: relative;
padding-bottom: 0.9rem; /* место для линии */
margin-bottom: 0.1rem;  /* расстояние между строками */
}

.tr::after 
{
content: "";
position: absolute;
left: 0.1rem;   /* отступ от левого края блока */
right: 0.1rem;  /* отступ от правого края блока */
bottom: 0;
height: 0.2rem;
background: #c28b2c;
}

.tr:last-child::after 
{
display: none;
}

@media (max-width: 600px) 
{

.tr 
{
grid-template-columns: 1fr;
}

.tr::after 
{
left: 0.1rem;   /* отступ от левого края блока */
right: 0.1rem;  /* отступ от правого края блока */
}

}


.trx 
{
/*display:table-row;*/
}


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

/*
.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;
}

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

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

.side-panel-narrow 
{
position: fixed;
left: 0rem;
top: 30vh;
width: clamp(40px, 15vw, 120px);
height: clamp(40px, 15vw, 120px);
z-index: 1000;
}

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

.sidebar
{
direction: rtl;
display:none;  
}

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

[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: clamp(18px, 4vh, 34px);
}

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

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


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

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

.top-r 
{
height: 20vh;
}

.middle-r 
{
height: 70vh;
}

.bottom-r 
{
height: 10vh;
}

.boy 
{
left: 67%;
}

.frame-inner 
{
padding-left: 0.1rem;
padding-right: 0.1rem;
}

.names-table, .words-table, .expressions-table, .text-table, .translate-table, .info-table
{
font-size: clamp(18px, 6vh, 34px);
}

}

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



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

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

.intro-day-h22
{
font-size: clamp(18px, 9vh, 45px);
}

.intro-day-h23 
{
font-size: clamp(18px, 9vh, 45px);
}

.top-r 
{
height: 20vh;
}

.middle-r 
{
height: 75vh;
}

.bottom-r 
{
height: 5vh;
}

.boy 
{
left: 60%;
}

.frame-inner 
{
padding-left: 0.5rem;
padding-right: 0.5rem;
}

.names-table, .words-table, .expressions-table, .text-table, .translate-table, .info-table
{
font-size: clamp(18px, 7vh, 34px);
}

.card-title 
{
top: -1.3rem;
left: -0.5rem;                 /* ← якорь по X */
padding: 0.6vh 1vw;
border-radius: 1rem;
font-size: clamp(18px, 4vh, 34px);
}

}

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




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

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

.intro-day-h22
{
font-size: clamp(18px, 9vh, 40px);
}

.intro-day-h23 
{
font-size: clamp(18px, 9vh, 40px);
}

.top-r 
{
height: 17vh;
}

.middle-r 
{
height: 70vh;
}

.bottom-r 
{
height: 13vh;
}

.boy 
{
left: 60%;
}

.frame-inner 
{
padding-top: 0.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
}

.names-table, .words-table, .expressions-table, .text-table, .translate-table, .info-table
{
font-size: clamp(18px, 7vh, 34px);
/*display: none;*/
}

.card-title 
{
top: -1.3rem;
left: -0.5rem;                 /* ← якорь по X */
padding: 0.6vh 1vw;
border-radius: 1rem;
font-size: clamp(18px, 3.5vh, 34px);
}

}

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




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

@media screen and (orientation: landscape) and (min-width: 1500px) and (max-width: 1899px) and (min-height: 0px) and (max-height: 689px) /*Notebook New 1536 x 686*/
{

.intro-day-h22, .intro-day-h23 
{
font-size: clamp(18px, 9vh, 44px);
}

.top-r 
{
height: 20vh;
}

.middle-r 
{
height: 75vh;
}

.bottom-r 
{
height: 5vh;
}

.boy 
{
left: 60%;
display: block;
}

.frame-inner 
{
padding-left: 2rem;
padding-right: 2rem;
}

.names-table, .words-table, .expressions-table, .text-table, .translate-table, .info-table
{
font-size: clamp(18px, 7vh, 34px);
}

}

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


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

@media screen and (orientation: landscape) and (min-width: 1500px) and (max-width: 1899px) and (min-height: 690px) and (max-height: 750px) /*241E Philips 1536 x 739*/
{

.intro-day-h22, .intro-day-h23 
{
font-size: clamp(18px, 9vh, 44px);
}

.top-r 
{
height: 20vh;
}

.middle-r 
{
height: 75vh;
}

.bottom-r 
{
height: 5vh;
}

.boy 
{
left: 60%;
display: block;
}

.frame-inner 
{
padding-left: 2rem;
padding-right: 2rem;
}

.names-table, .words-table, .expressions-table, .text-table, .translate-table, .info-table
{
font-size: clamp(18px, 7vh, 34px);
}

}

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


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

@media screen and (orientation: landscape) and (min-width: 1900px) and (max-width: 2409px) and (min-height: 910px) and (max-height: 960px) /*HP My 1920*950 + Oleg 1920*919*/
{

.intro-day-h22, .intro-day-h23 
{
font-size: clamp(18px, 9vh, 44px);
}

.top-r 
{
height: 20vh;
}

.middle-r 
{
height: 75vh;
}

.bottom-r 
{
height: 5vh;
}

.boy 
{
left: 60%;
display: block;
}

.frame-inner 
{
padding-left: 2rem;
padding-right: 2rem;
}

.names-table, .words-table, .expressions-table, .text-table, .translate-table, .info-table
{
font-size: clamp(18px, 7vh, 34px);
}

}

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