/* ===================== ШРИФТИ (всі з папки /fonts) ===================== */

/* ---- Borsook ---- */
@font-face {
    font-family: 'Borsook';
    src: url('../fonts/boorsok.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ---- Fira Sans Condensed: Light (300) ---- */
@font-face {
    font-family: 'Fira Sans Condensed';
    src: url('../fonts/FiraSansCondensed-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* ---- Fira Sans Condensed: Regular (400) ---- */
@font-face {
    font-family: 'Fira Sans Condensed';
    src: url('../fonts/FiraSansCondensed-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ---- Fira Sans Condensed: Black (900) ---- */
@font-face {
    font-family: 'Fira Sans Condensed';
    src: url('../fonts/FiraSansCondensed-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ---- Nunito: Light (300) ---- */
@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* ---- Nunito: ExtraBold (800) ---- */
@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ---- TT Rounds Neue: Thin (100) ---- */
@font-face {
    font-family: 'TT Rounds Neue';
    src: url('../fonts/TTRoundsNeue-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* ---- TT Rounds Neue: ExtraLight (200) ---- */
@font-face {
    font-family: 'TT Rounds Neue';
    src: url('../fonts/TTRoundsNeue-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* ---- TT Rounds Neue: Regular (400) ---- */
@font-face {
    font-family: 'TT Rounds Neue';
    src: url('../fonts/TTRoundsNeue-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ---- TT Rounds Neue: Medium (500) ---- */
@font-face {
    font-family: 'TT Rounds Neue';
    src: url('../fonts/TTRoundsNeue-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ---- TT Rounds Neue: Bold (700) ---- */
@font-face {
    font-family: 'TT Rounds Neue';
    src: url('../fonts/TTRoundsNeue-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---- TT Rounds Neue: DemiBold (600) ---- */
@font-face {
    font-family: 'TT Rounds Neue';
    src: url('../fonts/TTRoundsNeue-DemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ---- TT Rounds Neue: ExtraBold (800) ---- */
@font-face {
    font-family: 'TT Rounds Neue';
    src: url('../fonts/TTRoundsNeue-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ---- TT Rounds Neue: Black (900) ---- */
@font-face {
    font-family: 'TT Rounds Neue';
    src: url('../fonts/TTRoundsNeue-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ===================== БАЗОВІ СТИЛІ ===================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: #FFF0D0;
    height: 100vh;             /* рівно висота екрана — без вертикальної прокрутки */
    overflow: hidden;
    color: #3d3d3d;

    /* колонка: хедер зверху, основний блок займає решту висоти */
    display: flex;
    flex-direction: column;
}

/* ===================== ХЕДЕР ===================== */
.header {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.header__inner {
    max-width: none;     /* обмеження ширини знято — хедер на всю ширину екрана */
    margin: 0 auto;
    padding: 30px 55px;  /* 19px = висота (верх/низ), 55px = відступ від країв (ліво/право) */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}

/* ---- Ліва частина ---- */
.header__left {
    display: flex;
    justify-content: flex-start;
}

.btn-report {
    position: relative;      /* потрібно для відблиску ::before */
    overflow: hidden;        /* щоб відблиск не вилазив за межі кнопки */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    background-color: #82CD47;      /* колір заливки кнопки */
    color: #ffffff;
    border: none;
    border-radius: 40px;

    /* ↓↓↓ ВИСОТА КНОПКИ — регулюється тут ↓↓↓
       Зробив удвічі вищою через height + вертикальні падінги.
       Хочеш ще вище/нижче — міняй значення height. */
    height: 63px;                   /* було ~34px → тепер удвічі більше */
    padding: 0 31px;              /* ширше на 5px (по 2.5px з кожного боку) */
    /* ↑↑↑ ВИСОТА КНОПКИ ↑↑↑ */

    /* ↓↓↓ ШРИФТ КНОПКИ — Borsook ↓↓↓ */
    font-family: 'Borsook';
    font-size: 16px;

    /* ↑↑↑ ШРИФТ КНОПКИ ↑↑↑ */

    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;

    /* ↓↓↓ ТІНЬ КНОПКИ — регулюється тут ↓↓↓
       Формат:  X  Y  Blur  Spread  Color
       Значення 1-в-1 як у Figma: X0  Y4  Blur0  Spread0  #389238 */
    box-shadow: 0 4px 0 0 #389238;
    /* ↑↑↑ ТІНЬ КНОПКИ ↑↑↑ */

    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* ===== ПРОСТА АНІМАЦІЯ ПРИ НАВЕДЕННІ ===== */
/* Кнопка м'яко піднімається, тінь трохи глибшає */
.btn-report:hover {
    transform: translateY(-2px);         /* наскільки піднімається — регулюється тут */
    box-shadow: 0 6px 0 0 #389238;       /* тінь у піднятому стані */
}

/* При кліку — вдавлюється */
.btn-report:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 0 #389238;
}

/* ===== АНІМАЦІЯ 1: відблиск, що пробігає по кнопці ===== */
.btn-report::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    /* швидкість/частота відблиску — регулюється тут (4s = раз на 4 сек) */
    animation: btn-shine 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes btn-shine {
    0%   { left: -80%; }
    35%  { left: 130%; }
    100% { left: 130%; }   /* пауза до кінця циклу */
}

/* ===== АНІМАЦІЯ 2: серце "б'ється" ===== */
.btn-report__icon {
    width: 26px;      /* розмір іконки — регулюється тут */
    height: 26px;
    object-fit: contain;
    display: block;
    margin-left: 3px;   /* серце посунуте вправо на 3px */
    /* частота серцебиття — регулюється тут (2s = цикл кожні 2 сек) */
    animation: heartbeat 2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    12%      { transform: scale(1.25); }   /* перший удар */
    24%      { transform: scale(1); }
    36%      { transform: scale(1.2); }    /* другий удар */
    48%      { transform: scale(1); }      /* далі — пауза */
}



/* ---- Центр: логотип ---- */
.header__center {
    display: flex;
    justify-content: center;
}

.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}

.logo__img {
    height: 88px;      /* висота лого — регулюється тут */
    width: auto;
    display: block;
}

/* ---- Права частина ---- */
.header__right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 25px;
}

.icon-btn {
    position: relative;   /* точка відліку для кружечка-лічильника */
    width: 63px;
    height: 63px;
    border-radius: 50%;
    background-color: #FCF0D9;       /* заливка круга */
    border: 3px solid #FFFFFF;       /* білий бордер (stroke) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.icon-btn__img {
    width: 25px;      /* розмір іконки всередині — регулюється тут */
    height: 25px;
    object-fit: contain;
    display: block;
}

/* Іконка пошуку — трохи менша за іконку сповіщень */
#searchOpen .icon-btn__img {
    width: 23px;
    height: 23px;
}

/* Зелений кружечок-лічильник на іконці сповіщень */
.icon-btn__badge {
    position: absolute;
    right: -8px;                    /* позиція кружечка — регулюється тут */
    bottom: -8px;

    width: 30px;                    /* розмір кружечка — регулюється тут */
    height: 30px;
    border-radius: 50%;

    background-color: #82CD47;      /* зелена заливка */
    border: 3px solid #FFF0D0;      /* білий обідок */

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: 'Borsook', sans-serif;   /* шрифт цифри */
    font-size: 13px;
    color: #FFFFFF;
    line-height: 1;
}

.icon-btn:hover {
    background-color: #FFFFFF;      /* при наведенні фон стає білим */
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

/* ---- Дропдаун сповіщень ---- */
.notif {
    position: relative;             /* точка відліку для випадаючого блока */
    display: inline-flex;
}

.notif__dropdown {
    position: absolute;
    top: calc(100% + 16px);         /* одразу під іконкою — відступ регулюється тут */
    right: -60px;                   /* зсув блока відносно дзвіночка */
    width: 340px;                   /* ширина блока — регулюється тут */
    max-width: calc(100vw - 32px);  /* не ширше за екран */
    max-height: 55vh;               /* довгий список — прокручується всередині */
    overflow-y: auto;

    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 20px 26px;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #b5b5b5;
    text-align: center;
    white-space: nowrap;
    z-index: 60;

    /* схований за замовчуванням */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

.notif__dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profile {
    position: relative;      /* точка відліку для меню */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
}

.profile__avatar {
    width: 100px;     /* розмір аватара — регулюється тут */
    height: 100px;
    margin-top:-20px;
}

.profile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* показувати SVG повністю, без обрізки */
    display: block;
}

.profile__chevron {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;

}

/* ===================== ОСНОВНИЙ БЛОК ===================== */
.main {
    position: relative;        /* точка відліку для панелі "Ігри" */
    flex: 1;                   /* займає всю висоту, що лишилась під хедером */
    min-height: 0;             /* дозволяє блоку стискатись, а не розпирати сторінку */
    display: flex;
    justify-content: center;   /* по горизонталі — центр */
    align-items: center;       /* по вертикалі — центр */
    padding: 20px;             /* відступи блоку — регулюються тут */
}

/* ---- Ромашка ---- */
.daisy {
    width: 100%;
    max-width: 660px;          /* розмір ромашки — регулюється тут */
    height: auto;
    max-height: 100%;          /* якщо екран нижчий — ромашка стискається, без прокрутки */
    display: block;
    overflow: visible;

    /* ===== АНІМАЦІЇ КВІТКИ =====
       1) daisy-pop — поява при завантаженні (виростає з пружинкою, 0.9s, один раз)
       2) daisy-breathe — дихання (стартує після появи, 4s = вдих-видих) */
    animation: daisy-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both,
               daisy-breathe 4s ease-in-out 0.9s infinite;
    transform-origin: center;
}

/* Поява: виростає з нічого, трохи перекручуючись, як жива */
@keyframes daisy-pop {
    0%   { transform: scale(0)   rotate(-25deg); opacity: 0; }
    100% { transform: scale(1)   rotate(0deg);   opacity: 1; }
}

@keyframes daisy-breathe {
    0%, 100% { transform: scale(1); }      /* видих */
    50%      { transform: scale(1.035); }  /* вдих — наскільки "надувається", регулюється тут */
}

/* Коли наводиш на пелюсток або серединку — завмирає ЛИШЕ дихання.
   У квітки дві анімації (поява daisy-pop + дихання daisy-breathe);
   значення через кому відповідають кожній із них по черзі,
   тому поява при наведенні продовжує йти й не застигає. */
.daisy:has(.petal:hover),
.daisy:has(.center:hover) {
    animation-play-state: running, paused;
}

/* Сама квітка: притемнюється, коли наводиш на будь-який пелюсток */
.daisy__base {
    transition: opacity 0.3s ease;
}

.daisy:has(.petal:hover) .daisy__base,
.daisy:has(.center:hover) .daisy__base {
    opacity: 0.35;             /* сила притемнення — регулюється тут */
}

/* ---- Пелюсток ---- */
.petal {
    cursor: pointer;
}

/* Невидима зона наведення (ловить курсор по формі пелюстка) */
.petal__hit {
    fill: transparent;
}

/* Копія квітки, обрізана по формі пелюстка.
   Схована, поки не наведеш — тоді "вистрибує" поверх притемненої квітки. */
.petal__img {
    opacity: 0;
    pointer-events: none;      /* щоб не перехоплювала курсор у сусідів */
    transition: opacity 0.25s ease;
}

.petal:hover .petal__img {
    opacity: 1;
    filter: drop-shadow(0 6px 14px rgba(122, 160, 60, 0.45));  /* сяйво */
}

/* ---- Серединка квітки ---- */
.center {
    cursor: pointer;
}

.center__hit {
    fill: transparent;         /* невидима зона наведення */
}

.center__img {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.center:hover .center__img {
    opacity: 1;
    /* тепле жовте сяйво — під колір серединки */
    filter: drop-shadow(0 0 16px rgba(240, 190, 40, 0.75));
}

/* Підпис "НД" на серединці */
.center__day {
    font-size: 30px;           /* розмір підпису — регулюється тут */
}

.center:hover .center__day {
    opacity: 1;
    animation: day-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Підпис дня тижня ---- */
.petal__day {
    font-family: 'Borsook', sans-serif;
    font-size: 22px;
    fill: #82CD48;             /* колір підпису — регулюється тут */
    letter-spacing: 2px;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;

    opacity: 0;
    transition: opacity 0.25s ease;

    /* щоб пружинка масштабувала підпис навколо його центру */
    transform-box: fill-box;
    transform-origin: center;
}

.petal:hover .petal__day {
    opacity: 1;
    /* підпис вистрибує з пружинкою */
    animation: day-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Майбутні дні — замкнені ---- */
.petal--locked,
.center--locked {
    cursor: not-allowed;
}

/* замочок біля підпису дня — з'являється разом із ним при наведенні */
.petal__lock {
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.petal--locked:hover .petal__lock,
.center--locked:hover .petal__lock {
    opacity: 0.55;                 /* напівпрозорий, як замок панелі "Ігри" */
}

@keyframes day-pop {
    0%   { transform: scale(0.4); }
    100% { transform: scale(1); }
}

/* ===================== ПАНЕЛЬ "ІГРИ" (справа) ===================== */
/* Контейнер: замок + текст лежать на фоні сторінки, таб — приліплений до краю */
.games {
    position: absolute;             /* прив'язана до .main, а не до вікна */
    right: 0;                       /* приліплений до правого краю */
    top: 50%;                       /* по центру нижнього блоку */
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    gap: 14px;                      /* відстань між замком, текстом і табом */
    z-index: 40;
}

.games__lock {
    width: 18px;                    /* розмір замка — регулюється тут */
    height: 18px;
    object-fit: contain;
    display: block;
    opacity: 0.55;
}

.games__text {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 100;               /* єдина накресленість у папці — Thin */
    font-size: 16px;                /* розмір тексту — регулюється тут */
    color: #9a9a9a;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;            /* щоб не переносився */
}

/* Таб — точні розміри з макета */
.games__tab {
    width: 44px;                    /* W 44.12 з Figma */
    height: 125px;                  /* H 124.62 з Figma */

    background: #FFF6E5;            /* Fill з Figma */
    border: 3px solid #FFFFFF;      /* Stroke з Figma, weight 3 */
    border-radius: 30px 0 0 30px;   /* радіуси: 30 / 0 / 0 / 30 */

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* При наведенні фон кнопки стає чисто білим */
.games:hover .games__tab {
    background-color: #FFFFFF;
}

.games__diamond {
    width: 34px;                    /* розмір діаманта — регулюється тут */
    height: 34px;
    object-fit: contain;
    display: block;
}

/* ===== АНІМАЦІЯ ПРИ НАВЕДЕННІ на блок з діамантом ===== */

/* Діамант підлітає, погойдується і сяє */
.games:hover .games__diamond {
    animation: diamond-dance 0.9s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(60, 210, 110, 0.8));   /* зелене сяйво */
}

@keyframes diamond-dance {
    0%, 100% { transform: translateY(0)    rotate(-10deg); }
    50%      { transform: translateY(-7px) rotate(10deg);  }
}

/* Замок тремтить: "ще закрито!" (колір не міняється) */
.games:hover .games__lock {
    animation: lock-shake 0.45s ease-in-out;
}

@keyframes lock-shake {
    0%, 100% { transform: rotate(0deg); }
    20%      { transform: rotate(-16deg); }
    45%      { transform: rotate(13deg); }
    70%      { transform: rotate(-8deg); }
    88%      { transform: rotate(4deg); }
}

/* ===================== ПАНЕЛЬ "ВДЯЧНІСТЬ" (зліва) ===================== */
/* Повне дзеркало панелі "Ігри": таб приліплений до лівого краю, текст поруч.
   Розміри навмисне ті самі, що в .games — щоб ліва і права вкладки збігались. */
.thanks {
    position: absolute;             /* прив'язана до .main, а не до вікна */
    left: 0;                        /* приліплена до лівого краю */
    top: 50%;                       /* по центру нижнього блоку */
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    /* більший, ніж у .games: кулька ширша за таб і виступає за нього вправо */
    gap: 30px;
    z-index: 40;
    text-decoration: none;
}

/* Таб — ті самі розміри, що в .games__tab, лише радіуси віддзеркалені */
.thanks__tab {
    width: 44px;
    height: 125px;

    background: #FFF6E5;
    border: 3px solid #FFFFFF;
    border-radius: 0 30px 30px 0;

    display: flex;
    align-items: center;
    justify-content: center;
    /* зсуває кульку вправо: вона ширша за таб, і без цього її лівий
       край ховався б за краєм екрана */
    padding-left: 22px;

    cursor: pointer;
    transition: background-color 0.2s ease;
}

.thanks:hover .thanks__tab {
    background-color: #FFFFFF;
}

.thanks__balloon {
    width: 56px;                    /* розмір кульки — регулюється тут */
    height: 56px;
    object-fit: contain;
    display: block;
}

/* кулька підлітає при наведенні — як діамант у сусідній панелі */
.thanks:hover .thanks__balloon {
    animation: balloon-float 1.6s ease-in-out infinite;
}

@keyframes balloon-float {
    0%, 100% { transform: translateY(0)    rotate(-4deg); }
    50%      { transform: translateY(-6px) rotate(4deg);  }
}

.thanks__text {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #807868;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* ===================== МЕНЮ ПРОФІЛЮ (при наведенні) ===================== */
.profile-menu {
    position: absolute;
    top: 100%;              /* одразу під блоком профілю */
    right: 0;               /* вирівняне по правому краю */
    min-width: 180px;       /* ширина меню — регулюється тут */
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 14px 0;
    z-index: 50;

    /* сховане за замовчуванням */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

/* Показуємо при наведенні на профіль (або на саме меню) */
.profile:hover .profile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Ім'я користувача зверху */
.profile-menu__name {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #3d3d3d;
    padding: 0 20px 12px;
    border-bottom: 1px solid #ececec;   /* лінія-роздільник */
}

.profile-menu__list {
    list-style: none;
    padding-top: 8px;
}

.profile-menu__link {
    display: block;
    padding: 10px 20px;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    color: #8a8a8a;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.profile-menu__link:hover {
    background-color: #f6f6f6;
    color: #3d3d3d;
}

/* ===================== ВІКНО ПОШУКУ ===================== */
/* Затемнення на всю сторінку */
.search-overlay {
    position: fixed;
    inset: 0;                              /* розтягнути на весь екран */
    background: rgba(0, 0, 0, 0.45);       /* сила затемнення — регулюється тут */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 120px;                    /* відступ вікна від верху — регулюється тут */
    z-index: 100;

    /* сховане за замовчуванням */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Відкритий стан (клас додається через JS) */
.search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Біле поле пошуку */
.search-box {
    width: 100%;
    max-width: 470px;                      /* ширина вікна — регулюється тут */
    background: #ffffff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    height: 62px;                          /* висота вікна — регулюється тут */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);

    /* легка поява згори */
    transform: translateY(-14px);
    transition: transform 0.25s ease;
}

.search-overlay.is-open .search-box {
    transform: translateY(0);
}

.search-box__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Nunito', sans-serif;
    font-size: 17px;
    color: #3d3d3d;
}

.search-box__input::placeholder {
    color: #b0b0b0;
}

.search-box__close {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    transition: background-color 0.15s ease;
}

.search-box__close:hover {
    background-color: #f0f0f0;
}

/* ===================== ПРОГРЕС-БАР (низ сторінки) ===================== */
.progress {
    /* Розміри смужки. Тримаємо їх у змінних, бо написи над доріжкою
       рахуються з них формулою — інакше на кожному розмірі екрана
       довелось би підбирати відступ окремо. */
    --track-h: 24px;                     /* висота світлої доріжки */
    --fill-h: 39px;                      /* висота зеленого заповнення */
    --pad: 30px;                         /* відступ написів від країв */
    --up: 18px;                          /* наскільки написи стоять над доріжкою */

    width: 100%;
}

/* Подвійний трикутник — прив'язаний до правого краю зеленого заповнення,
   тобто стоїть точно над межею зеленої та світлої частин */
.progress__arrow {
    position: absolute;
    right: 0;
    top: -40px;                 /* висота над баром — регулюється тут */
    transform: translateX(50%); /* центр трикутника рівно на межі */
    line-height: 0;
}

/* Світла доріжка (нижня, нижча) */
.progress__track {
    position: relative;
    width: 100%;
    height: var(--track-h);
    background-color: #CFE3A6;           /* колір доріжки */
    border-radius: 110px 0 0 0;          /* лівий верхній кут — як у зеленої */
}

/* Зелене заповнення (верхнє, вище за доріжку) */
.progress__fill {
    position: absolute;
    left: 0;
    bottom: 0;                           /* притиснуте до низу — виступає ВГОРУ над доріжкою */
    height: var(--fill-h);
    min-width: 60px;                     /* кусочок зеленого видно навіть на 0% */
    background: linear-gradient(90deg, #90E658 0%, #7DC44E 100%);
    border-radius: 110px 110px 0 0;      /* заокруглені тільки верхні кути */

    display: flex;
    align-items: center;
    justify-content: space-between;  /* XP зліва, рівень і відсоток справа */
    gap: 14px;                       /* написи ніколи не злипаються */
    padding: 0 var(--pad);
}

/* ---- Очки: зліва всередині зеленої частини ---- */
.progress__xp {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-family: 'TT Rounds Neue', sans-serif;
    white-space: nowrap;
}

.progress__xp-now {
    font-weight: 800;
    font-size: 16px;
    color: #FFFFFF;
}

.progress__xp-max {
    font-weight: 800;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

/* ---- Наступний рівень: над світлою доріжкою, біля правого краю ---- */
.progress__next {
    position: absolute;
    right: var(--pad);
    bottom: calc(100% + var(--up));

    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Borsook', sans-serif;
    font-size: 18px;
    color: #82CD48;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.progress__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Borsook', sans-serif;
    font-size: 18px;                     /* розмір напису — регулюється тут */
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Рядок написів усередині зеленого: очки ліворуч, рівень праворуч */
.progress__texts {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

/* ---- Початок нового рівня (заповнення менше за 30%) ----
   Написи не вміщаються в зелене, тож піднімаються над доріжкою —
   в один рядок із наступним рівнем праворуч. Щойно заповнення
   дотягує до 30%, усе повертається всередину зеленого, як було.

   Написи їдуть за межею зеленого: left: 100% рахується від самого
   заповнення, тож вони завжди стоять одразу за його краєм і
   рухаються разом із ним.

   Висоту рахуємо теж від заповнення (воно — батько для absolute):
   від його низу піднімаємось на висоту доріжки плюс --up
   і віднімаємо висоту самого заповнення. */
.progress__fill--tight .progress__texts {
    position: absolute;
    left: 100%;                     /* 100% = ширина самого заповнення */
    margin-left: var(--pad);        /* просвіт між межею і написами */
    bottom: calc(100% + var(--track-h) + var(--up) - var(--fill-h));

    justify-content: flex-start;
    gap: 18px;
}

/* над доріжкою фон кремовий — білий текст там не видно */
.progress__fill--tight .progress__label   { color: #82CD48; }
.progress__fill--tight .progress__xp-now  { color: #8C8C7A; font-weight: 600; }
.progress__fill--tight .progress__xp-max  { color: #B3B3A2; }

/* на телефоні на доріжці місця мало — лишаємо тільки рівень */
@media (max-width: 1150px) {
    .progress__fill--tight .progress__xp { display: none; }
}
/* зірочки наступного рівня в написі */
.progress__star {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.progress__star + .progress__star {
    margin-left: -4px;             /* зірки ближче одна до одної */
}

/* Підпис до «Розсилок»: цей пункт єдиний, який можна не відмічати.
   Стоїть під пігулкою, дрібно й тихо; сітку чеклиста не зсуває, бо
   лежить поверх. */
.check__note {
    position: absolute;
    right: 20px;
    bottom: -16px;

    font-family: 'TT Rounds Neue', sans-serif;
    font-size: 10px;
    line-height: 1;
    color: #b9b1a0;
    pointer-events: none;
}


/* пункт, який забули відмітити */
.check--missed .check__pill {
    border: 1px solid #E8A49E;
    background: #FFF6F5;
}

.check--missed .check__box {
    box-shadow: 0 0 0 2px rgba(226, 82, 70, 0.35);
}

/* ---- пояснення внизу модалки, коли пункт іще не виконано ----
   Картка стає вищою на --gate-extra, і рівно на стільки ж більшає її
   нижній відступ — тож чекліст і зелене поле не рухаються. Підказка
   лежить absolute у цій новій смузі, тому центрується якраз між
   зеленим блоком і низом картки. */
.report__gate {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--gate-band) + var(--gate-extra) - var(--note-thick));
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    text-align: center;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #E25246;

    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.report__gate.is-on { opacity: 1; }

/* картка з відкритою підказкою */
.report.is-gated { --gate-extra: var(--gate-grow); }

/* пігулка, за якою ще немає виконаної роботи */
.check--locked .check__pill { opacity: 0.75; }

/* тремтіння у відповідь на клік по невиконаному */
.check--shake .check__pill {
    animation: check-shake .45s cubic-bezier(.36, .07, .19, .97);
}

@keyframes check-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-7px); }
    40%, 60% { transform: translateX(7px); }
}

/* ===================== МОДАЛКА "ДАТИ ЗВІТ" ===================== */
/* Затемнення на всю сторінку */
.report-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);       /* сила затемнення — регулюється тут */
    display: flex;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;                      /* страховка: на дуже низькому екрані — прокрутка */
    z-index: 100;

    /* схована за замовчуванням */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.report-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Біла картка */
.report {
    position: relative;
    margin: auto;                          /* рівно по центру екрана (гориз. і верт.) */
    width: 100%;
    max-width: 800px;                      /* ширина вікна — регулюється тут */
    --gate-extra: 0px;                     /* наскільки картка виросла під підказку */
    --gate-band: 46px;                     /* рідний нижній відступ цього розміру */
    --gate-grow: 46px;                     /* наскільки нижчає картка з підказкою */
    --note-thick: 10px;                    /* темна товщина під зеленим блоком */

    height: calc(660px + var(--gate-extra)); /* висота вікна — регулюється тут */
    background: #FFFFFF;
    border-radius: 28px;
    padding: 56px 46px 46px;               /* зверху рівно під низ зеленої шапки — відступи до чекліста однакові зверху й знизу */
    padding-bottom: calc(var(--gate-band) + var(--gate-extra));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);

    /* колонка: чекліст зверху, зелене поле займає решту */
    display: flex;
    flex-direction: column;

    /* легка поява згори; висота змінюється, коли зʼявляється підказка */
    transform: translateY(-16px);
    transition: transform 0.25s ease, height 0.25s ease, padding-bottom 0.25s ease;
}

.report-overlay.is-open .report {
    transform: translateY(0);
}

/* ---- Зелена шапка (виступає над карткою) ---- */
.report__header {
    position: absolute;
    top: -32px;                            /* наскільки виступає — регулюється тут */
    left: 50%;
    transform: translateX(-50%);           /* по центру картки */

    /* Шапка мусить лежати вище чеклиста: transform вище створює власний
       шар, і без цього рядка випадний список днів ховався б ЗА пігулками
       завдань — вони йдуть пізніше в розмітці. */
    z-index: 6;
    width: 684px;                          /* розмір шапки — 684×88 */
    height: 88px;

    background: #7DC94E;
    border-radius: 24px;
    box-shadow: 0 10px 0 0 #389238;        /* нижня "товщина" — виглядає з-під блока */

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
}

.report__header-left {
    display: flex;
    align-items: center;
    gap: 14px;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;                      /* Medium */
    font-size: 16px;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.report__header-icon {
    width: 26px;                           /* розмір іконки — регулюється тут */
    height: 26px;
    object-fit: contain;
    display: block;
}

.report__day {
    display: flex;
    align-items: center;
    gap: 8px;

    background: none;
    border: none;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;                      /* ExtraBold */
    font-size: 15px;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ---- Чекліст ---- */
.report__checks {
    display: grid;
    grid-template-columns: 1fr 1fr;        /* дві колонки */
    column-gap: 20px;
    align-content: space-evenly;           /* ряди рівномірно по вільній висоті */
    flex: 1;                               /* займає весь простір між шапкою і полем */

    /* та сама ширина й вирівнювання, що в зелених блоків */
    width: 688px;
    margin: 0 auto;
    padding: 0 22px;                       /* збігається з внутрішнім відступом зеленого поля */
}

.check {
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* сам input ховаємо — малюємо свій квадратик */
.check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.check__box {
    width: 28px;                           /* розмір квадратика — регулюється тут */
    height: 28px;
    border-radius: 8px;
    background-color: #82CD47;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.15s ease;

    position: relative;                    /* квадратик лежить поверх білої пігулки */
    z-index: 1;
    margin-right: -14px;                   /* наполовину заходить на пігулку */
}

.check__box img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
    opacity: 0;                            /* галочка схована, поки не відмічено */
    transform: scale(0.4);
    transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.check input:checked + .check__box {
    background-color: #5DB52E;             /* відмічений — темніший */
}

.check input:checked + .check__box img {
    opacity: 1;
    transform: scale(1);                   /* галочка вистрибує з пружинкою */
}

/* Біла "пігулка" з іконкою і текстом */
.check__pill {
    position: relative;                    /* точка відліку для зірочки в кутку */
    display: inline-flex;
    align-items: center;
    flex: 1;                               /* всі пігулки однакової ширини */
    max-width: 250px;                      /* ширина пігулки — регулюється тут */
    gap: 14px;
    background: #FFFFFF;
    border-radius: 999px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10);
    height: 70px;                          /* висота пігулки — регулюється тут */
    padding: 0 22px 0 34px;                /* зліва більше — під квадратик, що заходить */
}

.check__icon {
    width: 26px;                           /* розмір іконки — регулюється тут */
    height: 26px;
    object-fit: contain;
    display: block;
}

.check__text {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 200;                      /* ExtraLight */
    font-size: 17px;
    color: #7d7d7d;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

/* короткі мобільні назви пунктів — показуються лише на мобільному */
.check__text--mobile {
    display: none;
}

/* ---- Зелене поле "Одкровення по хлібу" ---- */
.report__note {
    position: relative;                    /* точка відліку для панелі емодзі */
    background: #7DC94E;
    border-radius: 22px;
    box-shadow: 0 10px 0 0 #389238;        /* нижня "товщина" — виглядає з-під блока */
    padding: 20px 22px 14px;

    display: flex;
    flex-direction: column;
    width: 688px;                          /* розмір поля — 688×180 */
    height: 180px;
    margin: 0 auto;                        /* по центру картки */
    flex-shrink: 0;
}

.report__textarea {
    flex: 1;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    resize: none;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;                      /* Regular */
    font-size: 16px;
    color: #FFFFFF;
}

.report__textarea::placeholder {
    color: rgba(255, 255, 255, 0.85);
}

/* ---- Панель вибору емодзі ---- */
.emoji-picker {
    position: absolute;
    bottom: 64px;                          /* над рядком з іконками */
    right: 14px;
    width: 320px;                          /* ширина панелі — регулюється тут */
    max-height: 220px;
    overflow-y: auto;

    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
    padding: 12px;

    display: grid;
    grid-template-columns: repeat(8, 1fr); /* 8 емодзі в ряд */
    gap: 4px;

    /* схована за замовчуванням */
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    z-index: 10;
}

.emoji-picker.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.emoji-picker button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;                       /* розмір емодзі — регулюється тут */
    line-height: 1;
    padding: 5px;
    border-radius: 8px;
    transition: background-color 0.12s ease, transform 0.12s ease;
}

.emoji-picker button:hover {
    background-color: #f0f0f0;
    transform: scale(1.2);
}

/* нижній ряд: скріпка зліва, смайл + надіслати справа */
.report__note-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.report__note-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.report__tool {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    line-height: 0;
}

.report__tool img {
    width: 24px;                           /* розмір іконок — регулюється тут */
    height: 24px;
    object-fit: contain;
    display: block;
}

.report__send {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #97D66C;                   /* світліший квадратик */
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.report__send:hover {
    background: #a9e07f;
}

.report__send img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

/* ===================== СТОРІНКА ДНЯ (day.php) ===================== */

/* Зелена плашка "ДЕНЬ N – ..." одразу під хедером */
.day-pill {
    width: 468px;                          /* ширина плашки — регулюється тут */
    height: 68px;                          /* висота плашки — регулюється тут */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #7DC94E;
    border-radius: 0 0 80px 80px;          /* заокруглена тільки знизу — "виростає" з хедера */
    box-shadow: 0 6px 0 0 #389238;         /* темна "товщина" знизу */

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;                      /* ExtraBold */
    font-size: 15px;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

/* Мобільна верхня панель під-сторінок ("назад" + заголовок) — на десктопі схована */
.m-pagebar {
    display: none;
    align-items: center;
}

/* Сітка карток: 2 колонки × 3 ряди */
.tasks {
    display: grid;
    grid-template-columns: repeat(2, 370px);   /* ширина карток — регулюється тут */
    gap: 12px;                                 /* проміжок між картками */
}

.task-card {
    display: flex;
    align-items: center;
    gap: 22px;

    background: #FFFFFF;
    height: 114px;                         /* висота картки — регулюється тут */
    padding: 0 52px;
    text-decoration: none;
    border-radius: 0;                      /* базово кути прямі */
    box-shadow: 0 8px 0 0 #F0F0F0;         /* сіра тінь знизу */

    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Заокруглення 80px — тільки зовнішні кути сітки:
   1-ша картка — верхній лівий, 2-га — верхній правий,
   5-та — нижній лівий, 6-та — нижній правий. Середній ряд — без заокруглень. */
.tasks .task-card:nth-child(1) { border-radius: 80px 0 0 0; }
.tasks .task-card:nth-child(2) { border-radius: 0 80px 0 0; }
.tasks .task-card:nth-child(5) { border-radius: 0 0 0 80px; }
.tasks .task-card:nth-child(6) { border-radius: 0 0 80px 0; }

.task-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 0 0 #F0F0F0;
}

.task-card__icon {
    font-size: 38px;                       /* розмір емодзі-іконки — регулюється тут */
    line-height: 1;
}

.task-card__icon-img {
    --task-icon: 44px;                     /* розмір іконки-картинки */
    width: var(--task-icon);
    height: var(--task-icon);
    object-fit: contain;
    display: block;
}

/* Хрест "Нового заповіту" намальований дрібніше за решту набору —
   додаємо йому 4px, щоб у ряду виглядав однаково */
.task-card__icon-img--nt {
    width: calc(var(--task-icon) + 4px);
    height: calc(var(--task-icon) + 4px);
}

.task-card__text {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 200;                      /* ExtraLight */
    font-size: 20px;
    color: #8a8a8a;
}

/* ===================== СТОРІНКА НАЛАШТУВАНЬ (settings.php) ===================== */

/* ---- Картка акаунта з зеленою шапкою ---- */
.account {
    position: relative;
    width: 560px;                          /* ширина картки — регулюється тут */
    margin-top: 26px;                      /* місце під шапку, що виступає */
}

/* Верхня панель: кнопка "назад" + заголовок по центру (лише мобільна версія) */
.account__topbar {
    display: none;
    align-items: center;
    margin-bottom: 24px;
}

.account__back {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: #E9F5DF;                   /* світло-зелений квадратик */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.account__back:hover {
    background: #DCF0CB;
}

.account__title {
    flex: 1;
    text-align: center;
    margin-right: 46px;                    /* компенсує кнопку зліва — заголовок рівно по центру */
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #6f6f6f;
}

/* Зелена шапка — виступає над карткою, як у модалці звіту */
.account__header {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;                          /* ширина шапки — регулюється тут */
    height: 64px;
    z-index: 1;

    background: #7DC94E;
    border-radius: 20px;
    box-shadow: 0 7px 0 0 #389238;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.account__card {
    background: #FFFFFF;
    border-radius: 28px;
    padding: 26px 40px;            /* компактніше, щоб картка влазила в екран */
    box-shadow: 0 8px 0 0 #F0F0F0;
}

/* Хто залогінений */
.account__user {
    display: flex;
    align-items: center;
    gap: 18px;
}

.account__avatar {
    width: 54px;
    height: 54px;
    object-fit: contain;       /* без фону і обрізки — як намальовано */
}

.account__user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account__name {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 19px;
    color: #4a4a4a;
}

.account__level {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #a9a9a9;
}

.account__divider {
    height: 1px;
    background: #f2ecd9;
    margin: 16px 0 18px;
}

.account__subtitle {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #82CD47;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 16px 0 10px;
}

.btn-green--full {
    width: 100%;
    margin-top: 10px;
    padding: 16px 0;
}


/* Варіант main без вертикального центрування — контент іде згори і скролиться */
.main--top {
    align-items: flex-start;
    overflow-y: auto;
    padding: 34px 20px 60px;
}

.settings {
    width: 640px;                          /* ширина колонки налаштувань — регулюється тут */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* ---- Біла картка секції ---- */
.settings-card {
    background: #FFFFFF;
    border-radius: 26px;
    padding: 32px 38px;
    box-shadow: 0 8px 0 0 #F0F0F0;         /* та сама сіра тінь, що в картках дня */
}

.settings-card__title {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 19px;
    color: #4a4a4a;
    margin-bottom: 26px;
}

/* ---- Фото профілю ---- */
.settings-avatar {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 28px;
}

.settings-avatar__img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    background: #FFF6E5;
    border: 3px solid #FFF0D0;
}

.settings-avatar__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.settings-hint {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #b5b5b5;
}

/* ---- Зелена кнопка (загальна для налаштувань) ---- */
.btn-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #82CD47;
    color: #FFFFFF;
    border: none;
    border-radius: 30px;
    padding: 14px 34px;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    box-shadow: 0 4px 0 0 #389238;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
}

.btn-green:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 0 #389238;
}

.btn-green:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 0 #389238;
}

.btn-green--small {
    padding: 10px 22px;
    font-size: 13px;
}

/* ---- Поля вводу ---- */
.settings-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.settings-field__label {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #9a9a9a;
}

.settings-input {
    width: 100%;
    padding: 11px 18px;
    border: 2px solid #F0E6CF;             /* кремова рамка */
    border-radius: 14px;
    background: #FFFBF2;
    outline: none;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #4a4a4a;

    transition: border-color 0.15s ease;
}

.settings-input:focus {
    border-color: #82CD47;                 /* зелена рамка у фокусі */
}

/* Поле з іконкою праворуч (іконка видима лише на мобільному) */
.settings-input-wrap {
    position: relative;
}

.settings-input-wrap__icon {
    display: none;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;                  /* клік проходить у поле */
}

/* Поля, що існують лише в мобільній версії (Phone, Старий пароль) */
.settings-field--mobile {
    display: none;
}

/* Два поля поруч (нові паролі) */
.settings-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 8px;
}

.settings-row .settings-field {
    margin-bottom: 10px;
}

/* Поле "час" в один рядок із підписом */
.settings-field--inline {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin: 20px 0;
}

.settings-input--time {
    width: 130px;
}

/* ---- Рядок із перемикачем ---- */
.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid #f2f2f2;
}

.settings-toggle-row__text {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #4a4a4a;
}

/* ---- Перемикач (switch) ---- */
.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch__slider {
    position: absolute;
    inset: 0;
    background: #e0d8c4;
    border-radius: 28px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.switch__slider::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.switch input:checked + .switch__slider {
    background: #82CD47;
}

.switch input:checked + .switch__slider::before {
    transform: translateX(24px);
}

/* ---- "Що нагадувати" ---- */
.settings-subtitle {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #9a9a9a;
    margin-bottom: 16px;
}

.settings-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 14px;
}

/* ---- Видалення акаунта (внизу, стримано) ---- */
.settings-danger {
    text-align: center;
    padding: 8px 0 20px;
    margin-top: 50px;          /* відступ від картки — регулюється тут */
}

.settings-danger__btn {
    background: none;
    border: none;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #d9534f;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.settings-danger__btn:hover {
    color: #b52b27;
}

.settings-danger__hint {
    margin-top: 6px;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #c9c0ab;
}

/* "Вихід" у меню профілю — відділений лінією */
.profile-menu__link--exit {
    border-top: 1px solid #ececec;
    margin-top: 6px;
    padding-top: 12px;
}

/* ===================== СТОРІНКА ПРЕМІУМУ (premium.php) ===================== */

/* Контент преміуму: заголовок зверху, картки по центру вільного місця */
.main--premium {
    align-items: stretch;         /* секція займає всю висоту нижнього блоку */

    /* ↓↓↓ ВІДСТУП ЗАГОЛОВКА ВІД ХЕДЕРА — регулюється тут ↓↓↓ */
    padding-top: 60px;
    /* ↑↑↑ менше значення = заголовок вище ↑↑↑ */

    padding-bottom: 12px;
}

.premium {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.premium__title {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 900;                 /* Black */
    font-size: 25px;
    color: #55606c;
}

.premium__subtitle {
    /* ↓↓↓ ВІДСТУП ПІДЗАГОЛОВКА ВІД ЗАГОЛОВКА — регулюється тут ↓↓↓ */
    margin-top: 8px;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #a9a9a9;
}

/* ---- Три картки планів ---- */
.plans {
    display: flex;
    align-items: center;          /* середня картка вища — росте в обидва боки */
    justify-content: center;
    gap: 0;

    /* картки центруються у вільному місці МІЖ підзаголовком і нижньою смугою
       (заголовок при цьому лишається зверху) */
    margin: auto 0;

    /* ↓↓↓ ПІДЙОМ КАРТОК ВІД ЦЕНТРУ — регулюється тут ↓↓↓
       -20px = на 20px вище центру; 0 = рівно по центру; додатне = нижче */
    position: relative;
    top: -30px;
    /* ↑↑↑ ПІДЙОМ КАРТОК ↑↑↑ */
}

.plan {
    position: relative;           /* точка відліку для кнопки внизу */
    width: 292px;                 /* ширина картки — регулюється тут */
    min-height: 336px;            /* висота бічних карток — регулюється тут */
    background: #82CD48;          /* Fill з Figma */
    border-radius: 52px;          /* заокруглення картки — регулюється тут */
    padding: 30px 32px 82px;      /* знизу більше — місце під кнопку */
    color: #FFFFFF;
    display: flex;
    flex-direction: column;

    /* тінь картки з Figma: X0 Y0 Blur59 Spread0 #000000 15% */
    box-shadow: 0 0 59px 0 rgba(0, 0, 0, 0.15);
}

/* Середня картка — вища й поверх сусідніх */
.plan--mid {
    width: 302px;
    min-height: 398px;            /* висота середньої картки — регулюється тут */
    margin: 0 -14px;              /* трохи наїжджає на сусідні */
    z-index: 1;
}

/* Права картка — трохи вища за ліву */
.plan--year {
    min-height: 366px;
}

.plan__name {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 900;                 /* Black */
    font-size: 21px;
    text-align: center;
    letter-spacing: 0.5px;
}

.plan__note {
    margin-top: 6px;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 13px;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
}

/* ---- Ціна ---- */
.plan__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    margin: 12px 0 18px;
}

.plan__amount {
    font-family: 'Borsook', sans-serif;
    font-size: 56px;              /* розмір цифри — регулюється тут */
    line-height: 1;
}

.plan--mid .plan__amount {
    font-size: 74px;              /* у середній картці цифра більша */
}

.plan__unit {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 14px;
}

/* ---- Список переваг ---- */
.plan__features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.plan__features li {
    position: relative;
    padding-left: 30px;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 14px;
}

/* Галочка перед пунктом */
.plan__features li::before {
    content: '✓';
    position: absolute;
    left: 2px;
    top: -1px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #2f7d22;               /* темно-зелена галочка */
}

/* ---- Кнопка внизу картки ---- */
.plan__btn {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -22px;                /* наскільки виступає за край картки */
    height: 76px;                 /* висота кнопки — регулюється тут */

    background: #82CD48;          /* та сама заливка, що й картка (з Figma) */
    border: none;
    border-radius: 40px;
    cursor: pointer;

    font-family: 'Borsook', sans-serif;
    font-size: 15px;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 1px;

    /* тінь з Figma: X0 Y0 Blur16 Spread0 #000000 25% */
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.25);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.plan__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.3);
}

.plan__btn:active {
    transform: translateY(1px);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.22);
}

/* "Ваш план" — неактивна кнопка поточного тарифу */
.plan__btn--current {
    cursor: default;
}

.plan__btn--current:hover,
.plan__btn--current:active {
    transform: none;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.25);
}

/* ---- Зелена смуга внизу сторінки (притиснута до нижнього краю) ---- */
.premium-cta {
    display: block;
    width: 100%;                  /* на всю ширину екрана */
    margin: 0;
    height: 54px;
    flex-shrink: 0;

    background: #7DC94E;
    border: none;
    border-radius: 40px 40px 0 0; /* верхні кути скруглені, нижні прямі */
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 900;                 /* Black */
    font-size: 17px;
    color: #FFFFFF;

    transition: background-color 0.15s ease;
}

.premium-cta:hover {
    background: #86d158;
}

/* ===================== СТОРІНКА ВДЯЧНОСТІ (gratitude.php) ===================== */

.gratitude-main {
    flex-direction: column;
    padding: 0;
    overflow: hidden;              /* кульки стартують за нижнім краєм — без прокрутки */
}

/* Підказка під плашкою */
.gratitude-hint {
    margin-top: 18px;              /* відступ від плашки — регулюється тут */
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #b3a88e;
    text-align: center;
    pointer-events: none;
    z-index: 2;
}

/* Сцена, по якій літають кульки — на весь екран, ПОВЕРХ хедера,
   щоб кульки долітали до самого верху вікна */
.balloons {
    position: fixed;
    inset: 0;
    pointer-events: none;          /* сцена прозора для кліків — хедер працює */
    z-index: 90;                   /* вище хедера, але нижче пошуку і модалок (100) */
}

/* ---- Кулька ---- */
.balloon {
    position: absolute;
    left: 0;
    top: 0;
    width: 170px;                  /* розмір кульки — регулюється тут */
    cursor: pointer;
    user-select: none;
    will-change: transform;
    pointer-events: auto;          /* самі кульки клікабельні */

    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Тіло кульки */
.balloon__body {
    position: relative;
    width: 100%;
    height: 200px;                 /* висота кульки — регулюється тут */
    border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;

    /* об'єм: світла пляма зверху-зліва + основний колір + темніший низ */
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 50% 115%, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0) 55%),
        var(--main, #82CD48);

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 22px;

    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease;
}

/* При наведенні кулька трошки надувається */
.balloon:hover .balloon__body {
    transform: scale(1.05);
}

/* Текст подяки на кульці */
.balloon__text {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 17px;               /* розмір тексту — регулюється тут */
    line-height: 1.25;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

/* Вузлик під кулькою */
.balloon__knot {
    width: 16px;
    height: 12px;
    margin-top: -4px;
    background: var(--dark, #58A82F);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);   /* трикутничок */
}

/* Нитка */
.balloon__string {
    width: 20px;
    height: 70px;                  /* довжина нитки — регулюється тут */
    color: var(--dark, #58A82F);
    opacity: 0.8;
}

/* ---- ЛОП: кулька різко роздувається і зникає ---- */
.balloon--pop {
    pointer-events: none;
    animation: balloon-pop 0.3s ease-out forwards;
}

@keyframes balloon-pop {
    0%   { opacity: 1; }
    45%  { transform: scale(1.25); opacity: 1; }    /* роздувається */
    100% { transform: scale(0.3);  opacity: 0; }    /* і зникає */
}

/* важливо: transform кульки виставляє JS, тому лопання анімуємо на тілі */
.balloon--pop .balloon__body {
    animation: balloon-body-pop 0.3s ease-out forwards;
}

@keyframes balloon-body-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(0); }
}

.balloon--pop .balloon__knot,
.balloon--pop .balloon__string {
    opacity: 0;
}

/* ---- Бризки від лопання ---- */
.balloon-bit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
    animation: bit-fly 0.55s ease-out forwards;
}

@keyframes bit-fly {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        /* напрямок розльоту задає JS через --dx / --dy */
        transform: translate(var(--dx), calc(var(--dy) + 30px)) scale(0.4);
        opacity: 0;
    }
}

/* ---- Кнопка редагування списку (по центру, притиснута донизу) ---- */
.gratitude-edit {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;                  /* відступ від низу — регулюється тут */
    z-index: 80;                   /* під кульками (90), щоб кульки можна було лопати */

    width: 64px;                   /* розмір кнопки — регулюється тут */
    height: 64px;
    border-radius: 50%;
    background: #82CD47;
    border: none;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 4px 0 0 #389238;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.gratitude-edit:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 0 0 #389238;
}

.gratitude-edit:active {
    transform: translateX(-50%) translateY(2px);
    box-shadow: 0 2px 0 0 #389238;
}

/* ---- Модалка "Мій список вдячності" ---- */
.thanks-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    justify-content: center;       /* по центру екрана — і по горизонталі, */
    align-items: center;           /* і по вертикалі */
    z-index: 120;                  /* вище кульок (90) і пошуку (100) */

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.thanks-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.thanks-modal {
    position: relative;
    width: 100%;
    max-width: 520px;              /* ширина модалки — регулюється тут */
    background: #FFFFFF;
    border-radius: 28px;
    padding: 58px 34px 30px;       /* зверху більше — під зелену шапку */
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);

    transform: translateY(-16px);
    transition: transform 0.25s ease;
}

.thanks-overlay.is-open .thanks-modal {
    transform: translateY(0);
}

/* Зелена шапка — виступає над карткою, як у модалці звіту */
.thanks-modal__header {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;                  /* ширина шапки — регулюється тут */
    height: 64px;

    background: #7DC94E;
    border-radius: 20px;
    box-shadow: 0 7px 0 0 #389238;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 900;              /* Black */
    font-size: 16px;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.thanks-modal__close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);

    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    border: none;
    cursor: pointer;

    color: #FFFFFF;
    font-size: 14px;
    line-height: 1;

    transition: background-color 0.15s ease;
}

.thanks-modal__close:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* ---- Вкладки списків (Сім'я / Світ / Віра / +) ---- */
.thanks-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f2ecd9;
}

.thanks-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 30px;
    border: 2px solid #F0E6CF;
    background: #FFFBF2;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #9a9a9a;

    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, transform 0.12s ease;
}

.thanks-tab:hover {
    background: #FFF6E5;
    transform: translateY(-1px);
}

/* Активний список — зелена "таблетка" */
.thanks-tab--active {
    background: #82CD47;
    border-color: #82CD47;
    color: #FFFFFF;
    font-weight: 800;
    box-shadow: 0 3px 0 0 #389238;
    cursor: default;
}

.thanks-tab--active:hover {
    background: #82CD47;
    transform: none;
}

/* Кнопочки ✎ і ✕ всередині активної вкладки */
.thanks-tab__btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;

    color: #FFFFFF;
    font-size: 11px;
    line-height: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition: background-color 0.15s ease;
}

.thanks-tab__btn:hover {
    background: rgba(255, 255, 255, 0.45);
}

.thanks-tab__btn--del:hover {
    background: #d9534f;
}

/* Поле перейменування прямо у вкладці */
.thanks-tab__input {
    width: 120px;
    border: none;
    outline: none;
    background: transparent;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #FFFFFF;
}

.thanks-tab__input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Кнопка "+ новий список" — пунктирна */
.thanks-tab--add {
    border-style: dashed;
    font-size: 16px;
    font-weight: 800;
    color: #c0b491;
    padding: 8px 14px;
}

.thanks-tab--add:hover {
    color: #82CD47;
    border-color: #82CD47;
}

/* ---- Повзунок кількості кульок ---- */
.thanks-count {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f2ecd9;
}

.thanks-count__label {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #9a9a9a;
    white-space: nowrap;
}

/* Сам повзунок: зелена зафарбована частина + кремова доріжка.
   Межу зафарбовування (--fill) виставляє JS при кожному русі. */
.thanks-count__range {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 8px;
    background: linear-gradient(to right,
        #82CD47 var(--fill, 29%),
        #F0E6CF var(--fill, 29%));
    outline: none;
    cursor: pointer;
}

/* Кругла ручка (Chrome/Edge/Safari) */
.thanks-count__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;                   /* розмір ручки — регулюється тут */
    height: 24px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 3px solid #82CD47;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform 0.12s ease;
}

.thanks-count__range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

/* Кругла ручка (Firefox) */
.thanks-count__range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 3px solid #82CD47;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Зелений кружечок із поточним числом */
.thanks-count__value {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #82CD47;
    box-shadow: 0 3px 0 0 #389238;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 900;
    font-size: 15px;
    color: #FFFFFF;
}

/* ---- Список подяк ---- */
.thanks-list {
    list-style: none;
    max-height: 300px;             /* висота списку до прокрутки — регулюється тут */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 6px;
}

/* тоненький охайний скролбар */
.thanks-list::-webkit-scrollbar {
    width: 6px;
}
.thanks-list::-webkit-scrollbar-thumb {
    background: #dcd3bb;
    border-radius: 3px;
}

.thanks-list__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.thanks-list__input {
    flex: 1;
    padding: 11px 16px;
    border: 2px solid transparent;         /* рамка з'являється у фокусі */
    border-radius: 12px;
    background: #FFFBF2;
    outline: none;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #4a4a4a;

    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.thanks-list__input:hover {
    background: #FFF6E5;
}

.thanks-list__input:focus {
    border-color: #82CD47;
    background: #FFFFFF;
}

.thanks-list__del {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;

    color: #cfc6ad;
    font-size: 13px;
    line-height: 1;

    transition: background-color 0.15s ease, color 0.15s ease;
}

.thanks-list__del:hover {
    background: #ffecec;
    color: #d9534f;
}

.thanks-list__empty {
    padding: 22px 0;
    text-align: center;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #b5b5b5;
}

/* ---- Додавання нового пункту ---- */
.thanks-add {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #f2ecd9;
}

.thanks-add__input {
    flex: 1;
    padding: 12px 18px;
    border: 2px solid #F0E6CF;
    border-radius: 30px;
    background: #FFFBF2;
    outline: none;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #4a4a4a;

    transition: border-color 0.15s ease;
}

.thanks-add__input:focus {
    border-color: #82CD47;
}

.thanks-add__btn {
    padding: 0 26px;
    border: none;
    border-radius: 30px;
    background: #82CD47;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    box-shadow: 0 4px 0 0 #389238;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.thanks-add__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 0 #389238;
}

.thanks-add__btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 0 #389238;
}

/* ===================== СТОРІНКА "ХЛІБ": ВІДЕОПЛЕЄР ===================== */

/* Обгортка плеєра: на десктопі прозора (нічого не змінює),
   на мобільному стає сценою для повернутого на 90° відео */
.player-stage {
    display: contents;
}

/* Колонка сторінки "Хліб": пояснення + плеєр */
.bread {
    width: min(880px, 100%);       /* та сама ширина, що в плеєра */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bread-note {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.55;
    color: #7d7d7d;
    text-align: center;
    max-width: 640px;              /* рядок не розтягується на всю ширину плеєра */
    margin: 0 auto;
}

.player {
    position: relative;
    width: min(880px, 100%);       /* розмір плеєра — регулюється тут */
    aspect-ratio: 16 / 9;
    border-radius: 28px;
    overflow: hidden;
    background: #000000;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

.player__video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    cursor: pointer;
}

/* Рамка з YouTube займає ту саму коробку 16:9, що й локальне відео:
   заокруглення й тінь дає .player, тож зовні виглядає так само. */
.player__frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ---- Велика кнопка по центру (видно на паузі) ---- */
.player__big {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 92px;                   /* розмір кнопки — регулюється тут */
    height: 92px;
    border-radius: 50%;
    background: #82CD47;
    border: none;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;                    /* трикутник у SVG вже трохи зміщений вправо — цього досить */

    box-shadow: 0 5px 0 0 #389238, 0 12px 34px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, opacity 0.2s ease, visibility 0.2s ease;
}

.player__big:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

/* Під час відтворення велика кнопка схована */
.player:not(.player--paused) .player__big {
    opacity: 0;
    visibility: hidden;
}

/* ---- Нижня панель: світла "плаваюча" картка ---- */
.player__controls {
    position: absolute;
    left: 14px;                    /* відступи панелі від країв відео — регулюються тут */
    right: 14px;
    bottom: 14px;
    padding: 12px 16px 10px;

    background: rgba(255, 251, 242, 0.92);      /* кремовий, як фон сайту */
    backdrop-filter: blur(10px);                /* відео просвічує розмито */
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);

    display: flex;
    flex-direction: column;
    gap: 10px;

    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

/* Панель м'яко "пірнає" вниз, коли ховається */
.player--idle .player__controls {
    transform: translateY(8px);
}

/* Панель ховається, коли миша не рухається під час перегляду */
.player--idle .player__controls {
    opacity: 0;
    visibility: hidden;
}

.player--idle .player__video {
    cursor: none;                  /* і курсор теж */
}

/* ---- Смуга перемотування ---- */
.player__progress {
    position: relative;
    height: 8px;
    border-radius: 8px;
    background: #EDE3CB;           /* кремова доріжка, як у повзунків */
    cursor: pointer;
    touch-action: none;            /* перетягування працює і на тачі */
    transition: height 0.15s ease;
}

.player__progress:hover {
    height: 11px;                  /* при наведенні смуга товщає */
}

.player__progress-filled {
    position: relative;
    height: 100%;
    width: 0;
    border-radius: 8px;
    background: #82CD47;           /* зелений прогрес */
}

/* Кругла ручка на кінці зеленої смуги */
.player__progress-knob {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%) scale(0);

    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 3px solid #82CD47;     /* зелена окантовка — як у повзунка кульок */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);

    transition: transform 0.15s ease;
}

.player__progress:hover .player__progress-knob {
    transform: translateY(-50%) scale(1);
}

/* ---- Ряд кнопок ---- */
.player__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.player__left,
.player__right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.player__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: none;
    cursor: pointer;

    color: #55606c;                /* колір іконок (currentColor у SVG) */

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition: background-color 0.15s ease, color 0.15s ease;
}

.player__btn:hover {
    background: rgba(130, 205, 72, 0.16);   /* легка зелена підсвітка */
    color: #389238;
}

.player__time {
    margin-left: 6px;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #8a8a8a;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Кнопка швидкості — текстова */
.player__speed {
    width: auto;
    padding: 0 12px;
    border-radius: 20px;

    font-family: 'Borsook', sans-serif;
    font-size: 14px;
    color: #82CD47;                /* зелена, як акцент */
    letter-spacing: 0.5px;
}

/* ---- Повзунок гучності ---- */
.player__volume {
    width: 84px;                   /* довжина повзунка — регулюється тут */
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 6px;
    background: linear-gradient(to right,
        #82CD47 var(--fill, 100%),
        #EDE3CB var(--fill, 100%));
    outline: none;
    cursor: pointer;
}

.player__volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 3px solid #82CD47;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.player__volume::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 3px solid #82CD47;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* ---- Повний екран ---- */
.player:fullscreen {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
}

/* ===================== СТАРИЙ ЗАПОВІТ: СВИТОК (old.php) ===================== */

/* Сцена: тепле сяйво позаду свитка */
.ot-main {
    overflow: hidden;              /* порошинки не вилазять за межі */
}

.ot-main::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 62% 70% at 50% 46%,
            rgba(255, 246, 214, 0.95) 0%, rgba(255, 246, 214, 0) 70%),
        radial-gradient(ellipse 30% 30% at 15% 85%,
            rgba(130, 205, 72, 0.10) 0%, rgba(130, 205, 72, 0) 70%),
        radial-gradient(ellipse 30% 30% at 85% 15%,
            rgba(130, 205, 72, 0.10) 0%, rgba(130, 205, 72, 0) 70%);
}

/* ---- Порошинки світла ---- */
.ot-dust {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.ot-dust span {
    position: absolute;
    border-radius: 50%;
    background: #f2d488;
    box-shadow: 0 0 12px 3px rgba(242, 212, 136, 0.65);   /* тепле сяйво */
    opacity: 0;
    animation: dust-float 8s ease-in-out infinite;
}

/* кожна порошинка — своє місце, розмір і ритм */
.ot-dust span:nth-child(1) { left: 9%;  top: 24%; width: 6px; height: 6px; animation-duration: 9s; }
.ot-dust span:nth-child(2) { left: 17%; top: 68%; width: 5px; height: 5px; animation-duration: 7s;  animation-delay: 1.2s; }
.ot-dust span:nth-child(3) { left: 27%; top: 38%; width: 8px; height: 8px; animation-duration: 11s; animation-delay: 2.5s; }
.ot-dust span:nth-child(4) { left: 44%; top: 82%; width: 5px; height: 5px; animation-duration: 8s;  animation-delay: 0.6s; }
.ot-dust span:nth-child(5) { left: 62%; top: 14%; width: 7px; height: 7px; animation-duration: 10s; animation-delay: 3.1s; }
.ot-dust span:nth-child(6) { left: 74%; top: 62%; width: 5px; height: 5px; animation-duration: 7.5s; animation-delay: 1.8s; }
.ot-dust span:nth-child(7) { left: 86%; top: 32%; width: 8px; height: 8px; animation-duration: 12s; animation-delay: 4s; }
.ot-dust span:nth-child(8) { left: 93%; top: 74%; width: 6px; height: 6px; animation-duration: 9s;  animation-delay: 2.2s; }

@keyframes dust-float {
    0%   { transform: translate(0, 0);       opacity: 0; }
    18%  { opacity: 0.7; }
    50%  { transform: translate(14px, -34px); opacity: 0.35; }
    82%  { opacity: 0.7; }
    100% { transform: translate(-8px, -60px); opacity: 0; }
}

.ot {
    position: relative;
    z-index: 2;                    /* свиток поверх сяйва і порошинок */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* ---- Свиток (варіант 3: горизонтальний, як Тора) ---- */
.scroll {
    position: relative;
    width: min(936px, 96vw);       /* ширина свитка з валиками — регулюється тут */
    display: flex;
    flex-direction: row;           /* валик · пергамент · валик */
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 18px 32px rgba(90, 60, 20, 0.3));
}

/* ===== АНІМАЦІЯ ПОЯВИ: свиток РОЗГОРТАЄТЬСЯ ВБІК =====
   Валики роз'їжджаються від центру вліво і вправо, пергамент
   розтягується між ними. Все на transform — розбивка тексту
   на сторінки від цього не залежить. */

.scroll__roller--left {
    animation: unroll-left 1s cubic-bezier(0.25, 0.9, 0.3, 1) both;
}

.scroll__roller--right {
    animation: unroll-right 1s cubic-bezier(0.25, 0.9, 0.3, 1) both;
}

.scroll__paper {
    animation: unroll-paper 1s cubic-bezier(0.25, 0.9, 0.3, 1) both;
}

/* вміст пергаменту проявляється, коли свиток майже розгорнувся */
.scroll__paper > * {
    opacity: 0;
    animation: scroll-fade 0.45s ease 0.7s forwards;
}

@keyframes unroll-paper {
    from { transform: scaleX(0.02); }
    to   { transform: scaleX(1); }
}

@keyframes unroll-left {
    from { transform: translateX(calc(min(768px, 84vw) / 2)); }
    to   { transform: translateX(0); }
}

@keyframes unroll-right {
    from { transform: translateX(calc(min(768px, 84vw) / -2)); }
    to   { transform: translateX(0); }
}

@keyframes scroll-fade {
    to { opacity: 1; }
}

/* Вертикальний дерев'яний валик (зліва і справа): точена деревина */
.scroll__roller {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 32px;
    /* валик вищий за пергамент — виглядає з-за нього зверху і знизу */
    height: calc(clamp(390px, 58vh, 620px) + 52px);
    border-radius: 16px;
    background:
        repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.08) 0 5px, rgba(0, 0, 0, 0) 5px 16px),
        linear-gradient(90deg, #52300f 0%, #aa763e 42%, #7d5022 72%, #52300f 100%);
    box-shadow: 3px 0 7px rgba(60, 35, 10, 0.4),
                inset 2px 0 3px rgba(255, 220, 160, 0.35);   /* відблиск збоку */
}

/* Золоті точені наконечники зверху і знизу кожного валика */
.scroll__roller::before,
.scroll__roller::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle at 33% 28%,
        #f3d98d 0%, #d9b45e 38%, #a9832f 70%, #7d6020 100%);
    border: 2px solid #8a6a25;
    box-shadow: 0 3px 8px rgba(60, 35, 10, 0.5),
                inset 0 -3px 6px rgba(90, 60, 10, 0.4);
}

.scroll__roller::before { top: -17px; }
.scroll__roller::after  { bottom: -17px; }

/* ---- Пергамент ---- */
.scroll__paper {
    position: relative;
    z-index: 1;
    width: min(768px, 84vw);             /* ширина пергаменту — регулюється тут */
    height: clamp(390px, 58vh, 620px);   /* висота свитка — регулюється тут */
    margin: 0 -12px;                     /* заходить під валики з боків */

    background:
        /* затінення зверху і знизу — папір ніби ледь вигнутий */
        linear-gradient(180deg,
            rgba(120, 80, 20, 0.10) 0%, rgba(120, 80, 20, 0) 6%,
            rgba(120, 80, 20, 0) 94%, rgba(120, 80, 20, 0.10) 100%),
        radial-gradient(ellipse at 18% 10%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 42%),
        radial-gradient(ellipse at 88% 92%, rgba(120, 80, 20, 0.22) 0%, rgba(120, 80, 20, 0) 55%),
        radial-gradient(ellipse at 8% 85%, rgba(120, 80, 20, 0.12) 0%, rgba(120, 80, 20, 0) 40%),
        linear-gradient(160deg, #F3E1B2 0%, #EAD298 50%, #DFC07E 100%);

    /* рвані краї тепер ЗЛІВА і СПРАВА — там, де папір сходить з валиків */
    clip-path: polygon(
        16px 0%, calc(100% - 16px) 0%,
        100% 4%, calc(100% - 18px) 9%, calc(100% - 2px) 14%, calc(100% - 15px) 19%,
        calc(100% - 6px) 25%, calc(100% - 19px) 30%, calc(100% - 3px) 36%,
        calc(100% - 16px) 41%, calc(100% - 7px) 47%, calc(100% - 18px) 52%,
        calc(100% - 2px) 58%, calc(100% - 15px) 63%, calc(100% - 5px) 69%,
        calc(100% - 19px) 74%, calc(100% - 3px) 80%, calc(100% - 16px) 85%,
        calc(100% - 6px) 91%, calc(100% - 18px) 96%, calc(100% - 8px) 100%,
        16px 100%,
        2px 96%, 17px 90%, 4px 84%, 15px 79%, 6px 73%, 19px 68%, 3px 62%,
        16px 57%, 5px 51%, 18px 46%, 2px 40%, 14px 35%, 6px 29%, 18px 24%,
        3px 18%, 15px 13%, 5px 7%, 17px 3%
    );

    padding: 40px 56px 36px;       /* внутрішні відступи тексту — регулюються тут */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Стареча фактура паперу: волокна + віньєтка по краях + тінь від валиків */
.scroll__paper::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        /* тінь від валиків — папір вигинається, сходячи з них */
        linear-gradient(90deg, rgba(90, 55, 15, 0.18) 0%, rgba(90, 55, 15, 0) 6%,
                        rgba(90, 55, 15, 0) 94%, rgba(90, 55, 15, 0.18) 100%),
        /* горизонтальні волокна */
        repeating-linear-gradient(0deg,
            rgba(120, 80, 20, 0.035) 0 2px, rgba(120, 80, 20, 0) 2px 5px),
        /* віньєтка — краї темніші за середину */
        radial-gradient(ellipse at 50% 50%,
            rgba(110, 70, 20, 0) 55%, rgba(110, 70, 20, 0.14) 100%);
}

/* ---- Шапка: назва книги + розділ ---- */
.scroll__head {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    border-bottom: 2px solid rgba(93, 58, 23, 0.25);
    padding-bottom: 10px;
    flex-shrink: 0;
}

/* Орнамент ❦ по центру лінії під шапкою */
.scroll__head::after {
    content: '❦';
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    padding: 0 12px;
    background: #EDD7A2;           /* приблизно колір пергаменту в цій зоні */
    color: #7a5a2b;
    font-size: 15px;
    line-height: 1;
}

.scroll__book {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #4b3010;
}

.scroll__chapter {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 15px;
    color: #7a5a2b;
    white-space: nowrap;
}

/* ---- Текст ---- */
.scroll__text {
    flex: 1;
    min-height: 0;
    overflow: hidden;              /* скільки влізло — стільки й показуємо (решта на наступній сторінці) */

    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;               /* розмір тексту — регулюється тут */
    line-height: 1.55;
    color: #4b3418;

    /* дві колонки, як у старовинних книгах — вміщається більше тексту */
    column-count: 2;
    column-gap: 36px;
    column-rule: 1px solid rgba(93, 58, 23, 0.18);
}

.scroll__verse {
    margin-bottom: 9px;
    text-align: justify;
    break-inside: avoid;           /* вірш не рветься між колонками */
}

/* Номер вірша */
.scroll__num {
    font-weight: 700;
    font-size: 12px;
    color: #9a6c25;
    margin-right: 6px;
    vertical-align: super;
}

/* ---- Анімація гортання ---- */
.scroll__text--next { animation: page-next 0.3s ease both; }
.scroll__text--prev { animation: page-prev 0.3s ease both; }

@keyframes page-next {
    0%   { opacity: 0; transform: translateX(26px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes page-prev {
    0%   { opacity: 0; transform: translateX(-26px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* ---- Навігація (всередині свитка, під текстом) ---- */
.ot-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-shrink: 0;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 2px solid rgba(93, 58, 23, 0.25);   /* лінія, як під шапкою */
}

/* Кнопки "під бронзу" — в тон дерев'яних валиків */
.ot-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    background: linear-gradient(180deg, #a9743c 0%, #7d5022 55%, #5d3a17 100%);
    color: #f7e7c2;
    border: 1px solid rgba(255, 220, 150, 0.35);
    border-radius: 30px;
    padding: 10px 22px;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    box-shadow: 0 4px 0 0 #452a0e,
                inset 0 1px 2px rgba(255, 220, 160, 0.4);   /* відблиск зверху */
    transition: transform 0.12s ease, box-shadow 0.12s ease,
                opacity 0.15s ease, filter 0.15s ease;
}

.ot-nav__btn:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.12);
    box-shadow: 0 6px 0 0 #452a0e,
                inset 0 1px 2px rgba(255, 220, 160, 0.4);
}

.ot-nav__btn:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 2px 0 0 #452a0e,
                inset 0 1px 2px rgba(255, 220, 160, 0.4);
}

/* Кнопка на межі (перша/остання сторінка) */
.ot-nav__btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.ot-nav__info {
    min-width: 64px;
    text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 15px;
    color: #7a5a2b;               /* коричневий — у тон пергаменту */
}

/* ===================== СТОРІНКА ІГОР (games.php) ===================== */

/* Сховане — значить сховане: атрибут hidden сильніший за display:flex нижче */
.games-main [hidden],
.games-main.ghub[hidden] {
    display: none !important;
}

/* ---- Хаб: три картки вибору гри ---- */
.ghub {
    display: flex;
    gap: 28px;
    justify-content: center;
    flex-wrap: wrap;
}

.gcard {
    position: relative;
    width: 300px;                  /* ширина картки — регулюється тут */
    min-height: 300px;
    background: #FFFDF6;
    border-radius: 24px;
    border-left: 5px solid var(--accent, #82CD47);
    padding: 30px 28px 56px;
    cursor: pointer;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.gcard:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* акцентні кольори трьох карток */
.gcard--order { --accent: #F26B4F; }   /* коралова */
.gcard--tf    { --accent: #67B65C; }   /* зелена */
.gcard--day   { --accent: #A78BE0; }   /* бузкова */

.gcard__num {
    display: block;
    font-family: 'Borsook', sans-serif;
    font-size: 34px;
    color: #CFA050;                /* золотистий номер */
    letter-spacing: 3px;
    margin-bottom: 14px;
}

.gcard__title {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #3d3d3d;
    margin-bottom: 12px;
}

.gcard__desc {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #8a8a8a;
    margin-bottom: 20px;
}

/* Кольорова плашка-тег */
.gcard__tag {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 14%, #FFFFFF);
    color: var(--accent);
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 12px;
}

.gcard__arrow {
    position: absolute;
    right: 24px;
    bottom: 18px;
    font-size: 20px;
    color: #b9b1a0;
    transition: transform 0.18s ease, color 0.18s ease;
}

.gcard:hover .gcard__arrow {
    transform: translateX(4px);
    color: var(--accent);
}

/* ---- Спільне для екранів ігор ---- */
.game {
    width: min(680px, 94vw);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game__head {
    position: relative;            /* кнопка "До ігор" кріпиться до лівого краю */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;       /* заголовок — рівно по центру */
    margin-bottom: 8px;
    min-height: 40px;
}

.game__back {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 9px 18px;
    border: 2px solid #F0E6CF;
    border-radius: 30px;
    background: #FFFBF2;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #9a9a9a;

    transition: border-color 0.15s ease, color 0.15s ease;
}

.game__back:hover {
    border-color: #82CD47;
    color: #82CD47;
}

.game__title {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #3d3d3d;
}

.game__hint,
.game__progress {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #b3a88e;
    margin-bottom: 16px;
    text-align: center;
}

.game__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
}

.game__shuffle {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #9a9a9a;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.game__shuffle:hover { color: #3d3d3d; }

.game__result {
    margin-top: 14px;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #8a8a8a;
    text-align: center;
    min-height: 20px;
}

.game__result--win { color: #58A82F; font-weight: 800; }

.game__over {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 30px 0 10px;
}

.game__score {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: #3d3d3d;
    text-align: center;
}

/* ---- Гра 1: список для перетягування ---- */
.order-list {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FFFFFF;
    border-radius: 16px;
    border-left: 5px solid #E8DFC8;    /* нейтральна смужка до перевірки */
    padding: 13px 18px;
    cursor: grab;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.15s ease, border-color 0.2s ease;
    user-select: none;
}

.order-item:active { cursor: grabbing; }

.order-item--drag {
    opacity: 0.45;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.15);
}

.order-item__grip {
    color: #cfc6ad;
    font-size: 15px;
    letter-spacing: -2px;
}

.order-item__icon { font-size: 22px; }

.order-item__text {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #4a4a4a;
}

/* після перевірки */
.order-item--ok  { border-left-color: #82CD47; }
.order-item--bad {
    border-left-color: #F26B4F;
    animation: order-shake 0.35s ease;
}

@keyframes order-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    55%      { transform: translateX(5px); }
    80%      { transform: translateX(-3px); }
}

/* ---- Ігри 2 і 3: картка запитання ---- */
.tf-card {
    width: 100%;
    min-height: 130px;
    background: #FFFFFF;
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 34px;
    margin-bottom: 22px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tf-card__text {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 19px;
    line-height: 1.45;
    color: #3d3d3d;
    text-align: center;
}

/* спалахи відповіді */
.tf-card--good {
    box-shadow: 0 0 0 4px #82CD47, 0 8px 24px rgba(130, 205, 72, 0.35);
    transform: scale(1.02);
}

.tf-card--bad {
    box-shadow: 0 0 0 4px #F26B4F, 0 8px 24px rgba(242, 107, 79, 0.35);
    animation: order-shake 0.35s ease;
}

/* великі кнопки ✓ / ✗ */
.tf-btns {
    display: flex;
    gap: 18px;
    justify-content: center;
}

.tf-btn {
    padding: 16px 34px;
    border: none;
    border-radius: 30px;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #FFFFFF;

    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.tf-btn--yes {
    background: #82CD47;
    box-shadow: 0 4px 0 0 #389238;
}

.tf-btn--no {
    background: #F26B4F;
    box-shadow: 0 4px 0 0 #B84730;
}

.tf-btn:hover  { transform: translateY(-2px); }
.tf-btn--yes:hover { box-shadow: 0 6px 0 0 #389238; }
.tf-btn--no:hover  { box-shadow: 0 6px 0 0 #B84730; }
.tf-btn:active { transform: translateY(2px); }
.tf-btn--yes:active { box-shadow: 0 2px 0 0 #389238; }
.tf-btn--no:active  { box-shadow: 0 2px 0 0 #B84730; }

/* ---- Гра 3: кнопки днів 1–7 ---- */
.dayq-days {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.dayq-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid #F0E6CF;
    background: #FFFBF2;
    cursor: pointer;

    font-family: 'Borsook', sans-serif;
    font-size: 18px;
    color: #9a8b64;

    transition: transform 0.12s ease, background-color 0.15s ease,
                border-color 0.15s ease, color 0.15s ease;
}

.dayq-btn:hover {
    transform: translateY(-3px);
    border-color: #82CD47;
    color: #82CD47;
}

.dayq-btn--ok {
    background: #82CD47;
    border-color: #82CD47;
    color: #FFFFFF;
}

.dayq-btn--bad {
    background: #F26B4F;
    border-color: #F26B4F;
    color: #FFFFFF;
    animation: order-shake 0.35s ease;
}

/* ===================== ІГРИ БУТТЯ 2 ===================== */

/* .game — колонка з align-items:center, тому екрани ігор самі по собі
   стискаються по контенту; сітці й полю потрібна повна ширина */
#edenPlay,
#riversPlay,
#versePlay {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* акцентні кольори карток другого набору */
.gcard--eden   { --accent: #6FBF73; }   /* зелень саду */
.gcard--rivers { --accent: #4FA3D1; }   /* синь ріки */
.gcard--verse  { --accent: #CFA050; }   /* золото пергаменту */

/* ---- Гра 1: сад Едему ---- */
.eden-stats {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-bottom: 14px;
}

.eden-stat {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #4a4a4a;
    letter-spacing: 1px;
}

.eden-field {
    position: relative;
    width: min(620px, 92vw);
    height: 360px;
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.45), transparent 55%),
        linear-gradient(160deg, #DFF0D0 0%, #BFE0AE 100%);
    box-shadow: inset 0 0 0 3px #FFFFFF, 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
}

/* спалах, коли зірвано плід дерева пізнання */
.eden-field--hit {
    box-shadow: inset 0 0 0 3px #F26B4F, 0 10px 30px rgba(242, 107, 79, 0.35);
    animation: order-shake 0.35s ease;
}

.eden-fruit {
    position: absolute;
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    animation: eden-pop 0.22s ease;
    transition: transform 0.15s ease, opacity 0.2s ease;
}

.eden-fruit:hover { transform: scale(1.08); }

/* плід дерева пізнання — червоне сяйво, чіпати не можна */
.eden-fruit--forbidden {
    background: #FFF0EC;
    box-shadow: 0 0 0 3px #F26B4F, 0 0 18px rgba(242, 107, 79, 0.6);
    animation: eden-pop 0.22s ease, eden-warn 0.9s ease-in-out infinite;
}

.eden-fruit--taken {
    transform: scale(1.4);
    opacity: 0;
    pointer-events: none;
}

@keyframes eden-pop {
    0%   { transform: scale(0.2); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

@keyframes eden-warn {
    0%, 100% { box-shadow: 0 0 0 3px #F26B4F, 0 0 14px rgba(242, 107, 79, 0.5); }
    50%      { box-shadow: 0 0 0 3px #F26B4F, 0 0 26px rgba(242, 107, 79, 0.9); }
}

/* ---- Гра 2: картки пам'яті «чотири ріки» ---- */
.mem-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    width: 100%;
}

.mem-card {
    aspect-ratio: 3 / 4;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.mem-card__inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

/* Переворот у 2D: картка стискається по горизонталі до «ребра» і назад,
   а грані міняються місцями саме в цю мить (див. затримку в .mem-card__face) */
.mem-card--open .mem-card__inner,
.mem-card--done .mem-card__inner {
    animation: mem-flip 0.4s ease;
}

@keyframes mem-flip {
    0%   { transform: scaleX(1); }
    50%  { transform: scaleX(0.06); }
    100% { transform: scaleX(1); }
}

.mem-card__face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
}

/* сорочка картки — крапля води на синьому */
.mem-card__face--back {
    background: linear-gradient(160deg, #8FCBE8 0%, #4FA3D1 100%);
    color: #FFFFFF;
    font-size: 26px;
}

.mem-card__face--front {
    background: #FFFFFF;
    color: #4a4a4a;
    opacity: 0;                    /* лицьовий бік ховається, доки картка закрита */
}

.mem-card--open .mem-card__face--front,
.mem-card--done .mem-card__face--front { opacity: 1; }

.mem-card--open .mem-card__face--back,
.mem-card--done .mem-card__face--back  { opacity: 0; }

/* назва ріки — крупніше, ніж опис землі */
.mem-card--name .mem-card__face--front {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: #2C7CA8;
}

.mem-card--done .mem-card__face--front {
    background: #F1FAEA;
    box-shadow: 0 0 0 3px #82CD47;
}

.mem-card--done { cursor: default; }

/* ---- Гра 3: складання вірша ---- */
.verse-line {
    width: 100%;
    min-height: 92px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 22px;
    border-radius: 20px;
    background: #FFFDF6;
    border: 2px dashed #E8DFC8;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.verse-line--done {
    border-color: #82CD47;
    border-style: solid;
    background: #F5FBEF;
}

.verse-word {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: #3d3d3d;
    animation: eden-pop 0.2s ease;
}

.verse-ref {
    margin: 10px 0 16px;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #CFA050;
    text-align: center;
}

.verse-bank {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.verse-chip {
    padding: 10px 16px;
    border: 2px solid #F0E6CF;
    border-radius: 30px;
    background: #FFFFFF;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #4a4a4a;

    transition: transform 0.12s ease, border-color 0.15s ease;
}

.verse-chip:hover {
    transform: translateY(-2px);
    border-color: #82CD47;
}

.verse-chip--bad {
    border-color: #F26B4F;
    color: #F26B4F;
    animation: order-shake 0.35s ease;
}

/* підсумок вірша може містити другий рядок з кількістю помилок */
#verseScore { white-space: pre-line; }

/* ---- Телефони ---- */
@media (max-width: 600px) {
    .eden-field { height: 300px; }
    .eden-fruit { width: 50px; height: 50px; font-size: 24px; }
    .mem-grid   { grid-template-columns: repeat(2, 1fr); }
}

/* ===================== ІГРИ БУТТЯ 3 ===================== */

#whoPlay,
#sortPlay,
#fadePlay {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* акцентні кольори карток третього набору */
.gcard--who  { --accent: #E0955C; }   /* теракота */
.gcard--sort { --accent: #7B94D8; }   /* синьо-бузкова */
.gcard--fade { --accent: #5FB89B; }   /* м'ятна */

/* ---- Гра 1: хто це сказав ---- */
.who-btns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: min(460px, 100%);
}

.who-btn {
    padding: 15px 10px;
    border: 2px solid #F0E6CF;
    border-radius: 20px;
    background: #FFFBF2;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #6f6f6f;

    transition: transform 0.12s ease, border-color 0.15s ease,
                background-color 0.15s ease, color 0.15s ease;
}

/* Бог — золотим, щоб відрізнявся від решти співрозмовників */
.who-btn--god { color: #B98B3C; }

.who-btn:hover {
    transform: translateY(-3px);
    border-color: #82CD47;
}

.who-btn--ok {
    background: #82CD47;
    border-color: #82CD47;
    color: #FFFFFF;
}

.who-btn--bad {
    background: #F26B4F;
    border-color: #F26B4F;
    color: #FFFFFF;
    animation: order-shake 0.35s ease;
}

/* ---- Гра 2: сортування по скриньках ---- */
.sort-pool {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    width: 100%;
    padding: 12px;
    border-radius: 18px;
    background: #FFFDF6;
    border: 2px dashed #E8DFC8;
    margin-bottom: 18px;
}

.sort-card {
    max-width: 260px;
    padding: 10px 15px;
    border: 2px solid #F0E6CF;
    border-radius: 16px;
    background: #FFFFFF;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.35;
    color: #4a4a4a;
    text-align: left;

    transition: transform 0.12s ease, border-color 0.15s ease,
                box-shadow 0.15s ease;
}

.sort-card:hover { transform: translateY(-2px); border-color: #82CD47; }

/* обрана картка — чекає, у яку скриньку її покласти */
.sort-card--sel {
    border-color: #82CD47;
    box-shadow: 0 0 0 3px rgba(130, 205, 72, 0.25);
    transform: translateY(-2px);
}

.sort-card--ok  { border-color: #82CD47; background: #F5FBEF; }
.sort-card--bad {
    border-color: #F26B4F;
    background: #FFF3F0;
    animation: order-shake 0.35s ease;
}

.sort-zones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}

.sort-zone {
    min-height: 150px;
    padding: 14px 12px;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    cursor: pointer;
}

.sort-zone__title {
    margin-bottom: 12px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #3d3d3d;
    text-align: center;
}

.sort-zone__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sort-zone__list .sort-card { max-width: none; width: 100%; }

/* спроба покласти четверту картку у повну скриньку */
.sort-zone--full {
    box-shadow: 0 0 0 3px #F26B4F, 0 6px 18px rgba(242, 107, 79, 0.3);
    animation: order-shake 0.35s ease;
}

/* ---- Нагадування під час гри ---- */
.gmodal {
    position: fixed;
    top: 0;
    left: 0;
    /* саме vw/vh, а не inset:0 — сторінка ширша за екран, і від неї вікно
       перекошувало б убік */
    width: 100vw;
    height: 100vh;
    z-index: 60;
    display: none;                 /* показ — через .gmodal--open */
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(45, 42, 35, 0.45);
}

.gmodal--open { display: flex; }

.gmodal__box {
    width: min(400px, calc(100vw - 40px));
    padding: 30px 28px 26px;
    border-radius: 24px;
    background: #FFFDF6;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
    text-align: center;
    animation: gmodal-in 0.2s ease;
}

@keyframes gmodal-in {
    0%   { transform: translateY(14px) scale(0.96); opacity: 0; }
    100% { transform: translateY(0)    scale(1);    opacity: 1; }
}

.gmodal__icon {
    display: block;
    font-size: 38px;
    margin-bottom: 12px;
}

.gmodal__title {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 19px;
    color: #3d3d3d;
    margin-bottom: 10px;
}

.gmodal__text {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    color: #8a8a8a;
    margin-bottom: 22px;
}

/* ---- Гра 3: зникомі слова ---- */
.fade-bar {
    width: min(420px, 100%);
    height: 8px;
    border-radius: 4px;
    background: #F0E6CF;
    overflow: hidden;
    margin-bottom: 18px;
}

.fade-bar__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: #5FB89B;
    transition: width 0.35s ease;
}

.fade-verse {
    width: 100%;
    min-height: 96px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 9px;
    padding: 20px 24px;
    border-radius: 20px;
    background: #FFFDF6;
    border: 2px dashed #E8DFC8;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.fade-verse--done {
    border-color: #5FB89B;
    border-style: solid;
    background: #F1FAF6;
}

.fade-word {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: #3d3d3d;
}

/* щойно згадане слово — коротко підсвічується */
.fade-word--new {
    color: #3E9C80;
    animation: eden-pop 0.22s ease;
}

/* порожнє місце замість схованого слова */
.fade-slot {
    min-width: 54px;
    padding: 0 4px;
    border-bottom: 2px solid #CFC6AD;

    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: #C2B79A;
    text-align: center;
}

/* ---- Телефони ---- */
@media (max-width: 600px) {
    .sort-zones { grid-template-columns: 1fr; }
    .sort-zone  { min-height: 96px; }
    .who-btns   { grid-template-columns: 1fr; }
}

/* ===================== ІГРИ БУТТЯ 4 ===================== */

#findPlay,
#craftPlay,
#linePlay {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* акцентні кольори карток четвертого набору */
.gcard--find  { --accent: #D2707E; }   /* приглушено-червона */
.gcard--craft { --accent: #6BA8B8; }   /* бірюзова */
.gcard--line  { --accent: #9B87C4; }   /* лілова */

/* ---- Гра 1: сітка пошуку слів ---- */
.ws-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    width: min(440px, 100%);
    padding: 14px;
    border-radius: 20px;
    background: #FFFDF6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    margin-bottom: 18px;
}

.ws-cell {
    aspect-ratio: 1;
    border: none;
    border-radius: 8px;
    background: #FFFFFF;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #5a5a5a;

    transition: background-color 0.12s ease, color 0.12s ease,
                transform 0.12s ease;
}

.ws-cell:hover { transform: scale(1.08); background: #F3F8EE; }

/* перша натиснута літера */
.ws-cell--sel {
    background: #FCE9A8;
    color: #8a6a1f;
}

.ws-cell--found {
    background: #82CD47;
    color: #FFFFFF;
}

.ws-cell--bad {
    background: #F26B4F;
    color: #FFFFFF;
}

.ws-words {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
    margin-bottom: 16px;
}

.ws-word {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #8a8a8a;
    letter-spacing: 1px;
}

.ws-word--found {
    color: #58A82F;
    text-decoration: line-through;
}

/* ---- Гра 2: пари «ім'я — діло» ---- */
.pair-board {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 14px;
    width: 100%;
}

.pair-names,
.pair-deeds {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pair-btn {
    padding: 13px 16px;
    border: 2px solid #F0E6CF;
    border-radius: 16px;
    background: #FFFFFF;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #4a4a4a;
    text-align: left;

    transition: transform 0.12s ease, border-color 0.15s ease,
                background-color 0.15s ease, box-shadow 0.15s ease;
}

.pair-btn--name {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    color: #3d3d3d;
    text-align: center;
}

.pair-btn:hover { transform: translateY(-2px); border-color: #82CD47; }

.pair-btn--sel {
    border-color: #82CD47;
    box-shadow: 0 0 0 3px rgba(130, 205, 72, 0.25);
}

.pair-btn--done {
    border-color: #82CD47;
    background: #F5FBEF;
    color: #58A82F;
    cursor: default;
    transform: none;
}

.pair-btn--bad {
    border-color: #F26B4F;
    background: #FFF3F0;
    animation: order-shake 0.35s ease;
}

/* ---- Гра 3: ланцюжок родоводу ---- */
.tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}

.tree-name,
.tree-slot {
    min-width: 150px;
    padding: 11px 20px;
    border-radius: 16px;
    text-align: center;

    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 17px;
}

.tree-name {
    background: #FFFFFF;
    color: #3d3d3d;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.tree-name--new {
    color: #7A5FB0;
    animation: eden-pop 0.22s ease;
}

.tree-slot {
    background: #FFFDF6;
    border: 2px dashed #E8DFC8;
    color: #C2B79A;
}

.tree-arrow {
    font-size: 15px;
    color: #C2B79A;
    line-height: 1;
}

/* ---- Телефони ---- */
@media (max-width: 600px) {
    .ws-grid  { gap: 3px; padding: 10px; }
    .ws-cell  { font-size: 13px; border-radius: 6px; }
    .pair-board { grid-template-columns: 1fr; }
    .pair-names { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .pair-names .pair-btn { padding: 10px 16px; }
}

/* ===================== ІГРИ БУТТЯ 5 ===================== */

#genPlay,
#guessPlay,
#calcPlay {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* акцентні кольори карток п'ятого набору */
.gcard--gen   { --accent: #E08A3C; }   /* бурштинова */
.gcard--guess { --accent: #4FB3A0; }   /* смарагдова */
.gcard--calc  { --accent: #8C93D8; }   /* волошкова */

/* ---- Гра 1: десять поколінь ---- */
.gen-bar {
    width: min(420px, 100%);
    height: 8px;
    border-radius: 4px;
    background: #F0E6CF;
    overflow: hidden;
    margin-bottom: 16px;
}

.gen-bar__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: #E08A3C;
    transition: width 0.35s ease;
}

/* компактні сходинки — щоб п'ятірка колін вміщалась на екран */
.tree--compact {
    width: min(300px, 100%);       /* усі сходинки однакової ширини */
    gap: 3px;
    margin-bottom: 16px;
}

.tree--compact .tree-name,
.tree--compact .tree-slot {
    width: 100%;
    min-width: 0;
    padding: 8px 18px;
    font-size: 16px;
}

.tree--compact .tree-arrow { font-size: 13px; }

/* скільки прожив — дрібним поруч з іменем */
.tree-years {
    display: block;
    font-family: 'TT Rounds Neue', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    color: #b3a88e;
}

/* ---- Гра 2: повзунок ---- */
.guess-box {
    width: min(460px, 100%);
    padding: 22px 24px 16px;
    border-radius: 20px;
    background: #FFFDF6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
    text-align: center;
}

.guess-value {
    display: block;
    margin-bottom: 12px;
    font-family: 'Borsook', sans-serif;
    font-size: 34px;
    color: #4FB3A0;
    letter-spacing: 2px;
}

.guess-slider {
    width: 100%;
    accent-color: #4FB3A0;
    cursor: pointer;
}

.guess-slider:disabled { cursor: default; opacity: 0.7; }

.guess-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: 12px;
    color: #b3a88e;
}

/* ---- Гра 3: лічба ---- */
.calc-screen {
    width: min(260px, 100%);
    padding: 14px 20px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    margin-bottom: 16px;

    font-family: 'Borsook', sans-serif;
    font-size: 30px;
    color: #3d3d3d;
    letter-spacing: 3px;
    text-align: center;

    transition: box-shadow 0.15s ease, color 0.15s ease;
}

.calc-screen--ok {
    color: #58A82F;
    box-shadow: 0 0 0 3px #82CD47, 0 6px 18px rgba(130, 205, 72, 0.3);
}

.calc-screen--bad {
    color: #F26B4F;
    box-shadow: 0 0 0 3px #F26B4F, 0 6px 18px rgba(242, 107, 79, 0.3);
    animation: order-shake 0.35s ease;
}

.calc-pad {
    display: grid;
    grid-template-columns: repeat(3, 74px);
    gap: 10px;
    justify-content: center;
}

.calc-key {
    height: 58px;
    border: 2px solid #F0E6CF;
    border-radius: 16px;
    background: #FFFBF2;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #5a5a5a;

    transition: transform 0.1s ease, background-color 0.15s ease,
                border-color 0.15s ease, color 0.15s ease;
}

.calc-key:hover  { transform: translateY(-2px); border-color: #82CD47; }
.calc-key:active { transform: translateY(1px); }

.calc-key--ok {
    background: #82CD47;
    border-color: #82CD47;
    color: #FFFFFF;
}

.calc-key--del { color: #C98A78; }

/* ---- Телефони ---- */
@media (max-width: 600px) {
    .calc-pad { grid-template-columns: repeat(3, 64px); }
}

/* ===================== ІГРИ БУТТЯ 6 ===================== */

#pairsPlay,
#arkPlay,
#slipPlay {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* акцентні кольори карток шостого набору */
.gcard--pairs { --accent: #C98A78; }   /* глиняна */
.gcard--ark   { --accent: #8A9E5B; }   /* оливкова */
.gcard--slip  { --accent: #D4A24C; }   /* вохра */

/* ---- Гра 1: по парі в ковчег ---- */
.ark-hold {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 8px;
    width: 100%;
    min-height: 96px;
    padding: 12px;
    border-radius: 20px 20px 8px 8px;
    background: linear-gradient(160deg, #E8D6B8 0%, #D6BF99 100%);
    box-shadow: inset 0 0 0 3px #FFFDF6, 0 8px 22px rgba(0, 0, 0, 0.09);
    margin-bottom: 12px;
}

.ark-tally {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.tally {
    padding: 5px 11px;
    border-radius: 12px;
    background: #FFFDF6;
    border: 2px solid #F0E6CF;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #9a8b64;
}

.tally--ok {
    border-color: #82CD47;
    background: #F5FBEF;
    color: #58A82F;
}

.ark-yard {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 70px;
}

.beast {
    width: 54px;
    height: 54px;
    border: 2px solid #F0E6CF;
    border-radius: 16px;
    background: #FFFFFF;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;

    transition: transform 0.12s ease, border-color 0.15s ease,
                background-color 0.15s ease;
}

.beast:hover { transform: translateY(-3px); border-color: #82CD47; }

.ark-hold .beast {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.9);
}

.beast--bad {
    border-color: #F26B4F;
    background: #FFF3F0;
    animation: order-shake 0.35s ease;
}

/* ---- Гра 2: ковчег за міркою ---- */
.ark-view {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: min(460px, 100%);
    height: 190px;
    padding: 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, #EAF4FB 0%, #CFE4F2 100%);
    box-shadow: inset 0 0 0 3px #FFFDF6, 0 8px 22px rgba(0, 0, 0, 0.07);
}

.ark-box {
    border-radius: 10px 26px 8px 8px;   /* ніс ковчега — праворуч */
    background: linear-gradient(160deg, #C99A62 0%, #A97B45 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: width 0.25s ease, height 0.25s ease, box-shadow 0.25s ease;
}

.ark-box--ok {
    box-shadow: 0 0 0 3px #82CD47, 0 6px 18px rgba(130, 205, 72, 0.35);
}

.ark-size {
    margin: 12px 0 16px;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #9a8b64;
}

.ark-dims {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, 100%);
}

.dim {
    display: grid;
    grid-template-columns: 84px 42px 1fr 42px 22px;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 16px;
    background: #FFFDF6;
    border: 2px solid #F0E6CF;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dim--ok { border-color: #82CD47; background: #F5FBEF; }

.dim__label {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #6f6f6f;
}

.dim__btn {
    height: 34px;
    border: none;
    border-radius: 10px;
    background: #F0E6CF;
    cursor: pointer;
    font-size: 18px;
    font-weight: 800;
    color: #7a6a44;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.dim__btn:hover  { background: #E4D6B5; }
.dim__btn:active { transform: translateY(1px); }

.dim__value {
    font-family: 'Borsook', sans-serif;
    font-size: 22px;
    color: #3d3d3d;
    text-align: center;
    letter-spacing: 1px;
}

.dim__mark {
    font-size: 16px;
    color: #58A82F;
    text-align: center;
}

/* ---- Гра 3: знайди помилку ---- */
.slip-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 22px 24px;
    border-radius: 20px;
    background: #FFFDF6;
    border: 2px dashed #E8DFC8;
}

.slip-word {
    padding: 5px 9px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;

    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: #3d3d3d;

    transition: background-color 0.12s ease, color 0.12s ease;
}

.slip-word:hover { background: #F0E6CF; }

.slip-word--found {
    background: #82CD47;
    color: #FFFFFF;
}

.slip-word--bad {
    background: #F26B4F;
    color: #FFFFFF;
    animation: order-shake 0.35s ease;
}

/* ---- Телефони ---- */
@media (max-width: 600px) {
    .beast { width: 46px; height: 46px; font-size: 22px; }
    .ark-view { height: 150px; }
    .dim { grid-template-columns: 74px 38px 1fr 38px 20px; }
    .slip-word { font-size: 16px; }
}

/* ===================== ІГРИ БУТТЯ 7 ===================== */

#crewPlay,
#floodPlay,
#numsPlay {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* акцентні кольори карток сьомого набору */
.gcard--crew  { --accent: #6C9BD2; }   /* небесна */
.gcard--flood { --accent: #3E8FA8; }   /* глибока вода */
.gcard--nums  { --accent: #B07CC6; }   /* аметистова */

/* ---- Гра 1: хто зайшов у ковчег ---- */
.crew-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
    gap: 10px;
    width: 100%;
}

.crew-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 2px solid #F0E6CF;
    border-radius: 18px;
    background: #FFFFFF;
    cursor: pointer;

    transition: transform 0.12s ease, border-color 0.15s ease,
                background-color 0.15s ease;
}

.crew-card:hover { transform: translateY(-2px); border-color: #82CD47; }

.crew-card__icon { font-size: 26px; line-height: 1; }

.crew-card__name {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #4a4a4a;
    text-align: center;
}

/* обраний — але ще не перевірений */
.crew-card--picked {
    border-color: #6C9BD2;
    background: #EFF5FC;
    box-shadow: 0 0 0 3px rgba(108, 155, 210, 0.25);
}

.crew-card--ok   { border-color: #82CD47; background: #F5FBEF; }
.crew-card--bad  {
    border-color: #F26B4F;
    background: #FFF3F0;
    animation: order-shake 0.35s ease;
}
.crew-card--miss { border-color: #E0B44C; background: #FFF9EC; }

/* ---- Гра 2: рівень води ---- */
.flood {
    position: relative;
    width: min(460px, 100%);
    height: 130px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, #EAF4FB 0%, #D3E7F4 100%);
    box-shadow: inset 0 0 0 3px #FFFDF6, 0 8px 22px rgba(0, 0, 0, 0.07);
    margin-bottom: 18px;
}

.flood__water {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20%;
    background: linear-gradient(180deg, #7FC1DE 0%, #3E8FA8 100%);
    transition: height 0.4s ease;
}

.flood__ark {
    position: absolute;
    left: 50%;
    bottom: 20%;
    transform: translate(-50%, 40%);
    font-size: 32px;
    line-height: 1;
    z-index: 1;
    transition: bottom 0.4s ease;
}

/* вода вже під самим краєм */
.flood--high { box-shadow: inset 0 0 0 3px #F26B4F, 0 8px 22px rgba(242, 107, 79, 0.28); }

.flood-opts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(460px, 100%);
}

.flood-opt {
    padding: 13px 18px;
    border: 2px solid #F0E6CF;
    border-radius: 16px;
    background: #FFFFFF;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #4a4a4a;

    transition: transform 0.12s ease, border-color 0.15s ease,
                background-color 0.15s ease, color 0.15s ease;
}

.flood-opt:hover { transform: translateY(-2px); border-color: #82CD47; }

.flood-opt--ok {
    border-color: #82CD47;
    background: #82CD47;
    color: #FFFFFF;
}

.flood-opt--bad {
    border-color: #F26B4F;
    background: #F26B4F;
    color: #FFFFFF;
    animation: order-shake 0.35s ease;
}

/* ---- Гра 3: числа потопу ---- */
.nums-bank {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
    min-height: 48px;
}

.nums-chip {
    min-width: 62px;
    padding: 9px 14px;
    border: 2px solid #F0E6CF;
    border-radius: 14px;
    background: #FFFFFF;
    cursor: pointer;

    font-family: 'Borsook', sans-serif;
    font-size: 22px;
    color: #8A5FA8;
    letter-spacing: 2px;

    transition: transform 0.12s ease, border-color 0.15s ease,
                box-shadow 0.15s ease;
}

.nums-chip:hover { transform: translateY(-2px); border-color: #B07CC6; }

.nums-chip--sel {
    border-color: #B07CC6;
    box-shadow: 0 0 0 3px rgba(176, 124, 198, 0.25);
}

.nums-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.nums-line {
    padding: 13px 18px;
    border-radius: 16px;
    background: #FFFDF6;
    border: 2px solid #F0E6CF;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.7;
    color: #4a4a4a;
}

.nums-line__ref {
    margin-left: 8px;
    font-weight: 800;
    font-size: 12px;
    color: #CFA050;
    white-space: nowrap;
}

.nums-slot {
    min-width: 52px;
    padding: 2px 8px;
    border: none;
    border-bottom: 2px solid #CFC6AD;
    background: transparent;
    cursor: pointer;

    font-family: 'Borsook', sans-serif;
    font-size: 19px;
    color: #C2B79A;
    letter-spacing: 2px;
}

.nums-slot:hover { border-bottom-color: #B07CC6; }

.nums-slot--done {
    border-bottom-color: #82CD47;
    color: #58A82F;
    cursor: default;
}

.nums-slot--bad {
    border-bottom-color: #F26B4F;
    color: #F26B4F;
    animation: order-shake 0.35s ease;
}

/* ---- Телефони ---- */
@media (max-width: 600px) {
    .crew-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .crew-card__name { font-size: 12px; }
    .flood { height: 110px; }
    .nums-line { font-size: 14px; }
}

/* ===================== ПОВТОРЕННЯ ТИЖНЯ ===================== */

.gcard--review { --accent: #58A82F; }

#revStart,
#revPlay {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game--wide { width: min(720px, 94vw); }

/* ---- Ромашка тижня: сім пелюсток, по одній на розділ ---- */
.wk {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 4px 0 14px;
}

.wk__petal {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 46px;
    height: 96px;
    margin-left: -23px;
    transform-origin: 50% 100%;
    border-radius: 50% 50% 42% 42%;
    background: #EDE6D6;
    box-shadow: inset 0 -6px 14px rgba(0, 0, 0, 0.05);
    transition: background-color 0.4s ease;
}

/* що твердіше тримається розділ — то зеленіша пелюстка */
.wk__petal--l0 { background: #EDE6D6; }
.wk__petal--l1 { background: #E4EFD2; }
.wk__petal--l2 { background: #C9E3A6; }
.wk__petal--l3 { background: #A2D275; }
.wk__petal--l4 { background: #7DC94E; }

.wk__petal--pulse { animation: wk-pulse 0.9s ease 2; }

@keyframes wk-pulse {
    0%, 100% { box-shadow: inset 0 -6px 14px rgba(0, 0, 0, 0.05); }
    50%      { box-shadow: inset 0 -6px 14px rgba(0, 0, 0, 0.05),
                           0 0 0 4px rgba(125, 201, 78, 0.35); }
}

.wk__label {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    font-family: 'TT Rounds Neue', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 12px;
    color: #7a6a44;
    text-align: center;
}

.wk__center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 92px;
    height: 92px;
    margin: -46px 0 0 -46px;
    border-radius: 50%;
    background: #FFFDF6;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wk__center b {
    font-family: 'Borsook', sans-serif;
    font-size: 26px;
    color: #58A82F;
    letter-spacing: 1px;
}

.wk__center span {
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: 11px;
    color: #b3a88e;
}

.wk-note {
    margin-bottom: 20px;
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: 13px;
    color: #b3a88e;
    text-align: center;
}

/* ---- Вибір режиму ---- */
.rev-modes {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.rev-mode {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 190px;
    padding: 16px 22px;
    border: 2px solid #F0E6CF;
    border-radius: 20px;
    background: #FFFFFF;
    cursor: pointer;

    transition: transform 0.14s ease, border-color 0.16s ease,
                box-shadow 0.16s ease;
}

.rev-mode:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.rev-mode b {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: #3d3d3d;
}

.rev-mode span {
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: 13px;
    color: #9a9a9a;
}

.rev-mode--calm:hover { border-color: #82CD47; }
.rev-mode--hard:hover { border-color: #E08A3C; }

/* ---- Хід повторення ---- */
.rev-bar {
    width: min(460px, 100%);
    height: 8px;
    border-radius: 4px;
    background: #F0E6CF;
    overflow: hidden;
    margin-bottom: 18px;
}

.rev-bar__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: #58A82F;
    transition: width 0.35s ease;
}

.rev-card { position: relative; padding-top: 34px; }

.rev-chapter {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    border-radius: 12px;
    background: #F5FBEF;
    color: #58A82F;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 12px;
    white-space: nowrap;
}

.rev-answer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(460px, 100%);
}

.rev-opt {
    padding: 13px 18px;
    border: 2px solid #F0E6CF;
    border-radius: 16px;
    background: #FFFFFF;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #4a4a4a;

    transition: transform 0.12s ease, border-color 0.15s ease,
                background-color 0.15s ease, color 0.15s ease;
}

.rev-opt:hover:not(:disabled) { transform: translateY(-2px); border-color: #82CD47; }
.rev-opt:disabled { cursor: default; }

.rev-opt--ok  { border-color: #82CD47; background: #82CD47; color: #FFFFFF; }
.rev-opt--bad {
    border-color: #F26B4F;
    background: #F26B4F;
    color: #FFFFFF;
    animation: order-shake 0.35s ease;
}

/* «Так / Ні» — двома кнопками в ряд */
.rev-answer:has(.rev-opt--tf) { flex-direction: row; }
.rev-opt--tf { flex: 1 1 0; text-align: center; font-weight: 800; }

/* ---- Введення відповіді (строгий режим) ---- */
.rev-input {
    display: flex;
    gap: 10px;
    width: 100%;
}

.rev-input__field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 13px 18px;
    border: 2px solid #F0E6CF;
    border-radius: 16px;
    background: #FFFFFF;
    outline: none;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #3d3d3d;

    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rev-input__field:focus { border-color: #82CD47; }

.rev-input__field--ok  { border-color: #82CD47; background: #F5FBEF; color: #3d7a1f; }
.rev-input__field--bad {
    border-color: #F26B4F;
    background: #FFF3F0;
    color: #C0432A;
    animation: order-shake 0.35s ease;
}

/* ---- Підсумок по розділах ---- */
.rev-report {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(420px, 100%);
}

.rev-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-radius: 14px;
    background: #FFFDF6;
    border: 2px solid #F0E6CF;
    text-decoration: none;

    transition: border-color 0.15s ease, transform 0.12s ease;
}

.rev-row:hover { transform: translateX(3px); border-color: #82CD47; }

.rev-row b {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #3d3d3d;
}

.rev-row span {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #9a8b64;
}

.rev-row i {
    font-family: 'TT Rounds Neue', sans-serif;
    font-style: normal;
    font-size: 12px;
    color: #CFA050;
}

.rev-row--ok { border-color: #CBE8B4; background: #F7FCF3; }
.rev-row--ok i { color: #58A82F; }

/* ---- Телефони ---- */
@media (max-width: 600px) {
    .wk { width: 210px; height: 210px; }
    .wk__petal { width: 40px; height: 80px; margin-left: -20px; }
    .wk__center { width: 78px; height: 78px; margin: -39px 0 0 -39px; }
    .rev-mode { min-width: 0; width: 100%; }
}

/* ===================== СТОРІНКА ВХОДУ (login.php) ===================== */

/* Фон сторінки — зелений градієнт з Figma: 7CB96F → 648D5E */
.auth-body {
    background: linear-gradient(180deg, #7CB96F 0%, #648D5E 100%);
    overflow-y: auto;              /* якщо екран нижчий за картку — сторінка прокручується */
}

.auth {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
}

/* ---- Центральна картка ---- */
.auth-card {
    position: relative;            /* точка відліку для хрестика знизу */
    width: min(660px, 94vw);       /* ширина картки — регулюється тут */
    min-height: 727px;             /* висота картки — регулюється тут */
    padding: 37px 44px 48px;       /* зверху менше — лого сидить вище */
    border-radius: 151px;

    /* той самий градієнт, що й фон сторінки (7CB96F → 648D5E) */
    background: linear-gradient(180deg, #7CB96F 0%, #648D5E 100%);

    /* тінь з Figma: X-2 Y29 Blur100 Spread39 #101010 8% */
    box-shadow: -2px 29px 100px 39px rgba(16, 16, 16, 0.08);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;   /* контент іде зверху: лого вище, решта з рівними відступами */
}

.auth-card__logo {
    height: 86px;                  /* розмір лого — регулюється тут */
    width: auto;
    margin-bottom: 24px;           /* відступ від лого до заголовка — регулюється тут */
}

.auth-card__title {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 900;              /* Black */
    font-size: 34px;
    color: #FFFFFF;
    margin-bottom: 42px;           /* відступ від заголовка до полів — регулюється тут */
}

/* ---- Форма ---- */
.auth-form {
    width: 374px;                  /* ширина полів і кнопки — регулюється тут */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 17px;                     /* відступи між полями/рядком/кнопкою — регулюється тут */
}

/* Поле-пігулка зі скляним фоном та іконкою */
.auth-field {
    position: relative;
    display: block;
    border-radius: 40px;
    overflow: hidden;              /* щоб відблиск не вилазив за пігулку */
    transition: transform 0.22s ease;
}

/* при фокусі поле м'яко підіймається */
.auth-field:focus-within {
    transform: translateY(-3px);
}

/* відблиск, що пробігає по полю при фокусі (як на кнопці "Дати звіт") */
.auth-field::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    pointer-events: none;
}

.auth-field:focus-within::after {
    animation: auth-shine 0.7s ease-out;
}

@keyframes auth-shine {
    0%   { left: -80%; }
    100% { left: 130%; }
}

/* відстань між двома інпутами — вдвічі більша за звичайний крок форми */
.auth-field + .auth-field {
    margin-top: 17px;              /* додається до gap 17px = разом 34px */
}

.auth-field__icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.auth-field__input {
    width: 100%;
    height: 81px;                  /* висота поля — регулюється тут */
    padding: 0 24px 0 62px;        /* зліва місце під іконку */
    border-radius: 40px;

    background: rgba(255, 255, 255, 0.36);   /* прозорість інпута — регулюється тут */
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    outline: none;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 17px;
    color: #FFFFFF;

    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.auth-field__input::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

.auth-field__input:focus {
    background: rgba(255, 255, 255, 0.45);
    border-color: #FFFFFF;
}

/* іконка радісно похитується, коли поле у фокусі */
.auth-field:focus-within .auth-field__icon {
    animation: auth-icon-hello 0.45s ease;
}

@keyframes auth-icon-hello {
    0%, 100% { transform: translateY(-50%) rotate(0deg); }
    25%      { transform: translateY(-50%) rotate(-14deg) scale(1.15); }
    55%      { transform: translateY(-50%) rotate(11deg)  scale(1.1); }
    80%      { transform: translateY(-50%) rotate(-5deg); }
}

/* ---- Рядок "Запам'ятати / Забули пароль?" ---- */
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;

    /* відступи зверху і знизу рядка — вдвічі більші за крок форми
       (додаються до gap 17px = разом по 34px) */
    margin-top: 17px;
    margin-bottom: 17px;
}

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
}

.auth-remember input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* білий квадратик чекбокса */
.auth-remember__box {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: #FFFFFF;
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    font-weight: 800;
    color: transparent;            /* галочка схована, поки не відмічено */
    transition: color 0.12s ease;
}

.auth-remember__box::after {
    content: '✓';
}

.auth-remember input:checked + .auth-remember__box {
    color: #57924A;                /* зелена галочка */
}

.auth-forgot {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #FFFFFF;
    text-decoration: none;
}

.auth-forgot:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Кнопка "Увійти" ---- */
.auth-submit {
    height: 81px;                  /* висота кнопки — регулюється тут */
    margin-top: 7px;
    border: none;
    border-radius: 40px;
    background: #FFFFFF;
    cursor: pointer;

    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: #3d3d3d;

    box-shadow: 0 10px 24px rgba(20, 50, 15, 0.18);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(20, 50, 15, 0.24);
}

.auth-submit:active {
    transform: translateY(1px);
    box-shadow: 0 6px 16px rgba(20, 50, 15, 0.2);
}

/* ---- "Немає акаунта? Реєстрація" ---- */
.auth-alt {
    margin-top: 42px;              /* відступ від кнопки до нижнього рядка */
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
}

.auth-alt__link {
    margin-left: 6px;
    font-weight: 800;
    color: #FFFFFF;
    text-decoration: underline dotted;   /* пунктирне підкреслення, як у макеті */
    text-underline-offset: 4px;
}

.auth-alt__link:hover {
    text-decoration-style: solid;
}

/* ---- Хрестик під карткою ---- */
.auth-card__cross {
    position: absolute;
    left: 50%;
    bottom: -33px;                 /* наполовину виступає за картку */
    transform: translateX(-50%);
    width: 40px;                   /* розмір хрестика — регулюється тут */
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(20, 50, 15, 0.25));
}

/* ---- Варіант картки для реєстрації (register.php) ----
   Полів п'ять, тому між сусідніми — звичайний крок форми (без подвоєння),
   а подвоєний відступ лишається тільки перед кнопкою. Лого немає,
   тому верхній відступ картки — як нижній, для рівноваги. */
.auth-card--register {
    padding-top: 48px;
    justify-content: center;       /* вміст рівно по центру картки */
}

.auth-card--register .auth-field + .auth-field { margin-top: 0; }

.auth-card--register .auth-submit { margin-top: 17px; }

/* ---- Вибір статі: "Стать · Чоловіча / Жіноча" одним рядком по центру ---- */
.auth-gender {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    /* відступ до заголовка зверху і до першого поля знизу — однаковий */
    margin-top: -16px;
    margin-bottom: 9px;
}

.auth-gender__label {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.9);
}

.auth-gender__opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.auth-gender__opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* сам кружечок */
.auth-gender__dot {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.36);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

/* зелена крапка всередині — з'являється при виборі */
.auth-gender__dot::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #57924A;
    transform: scale(0);
    transition: transform 0.15s ease;
}

.auth-gender__opt:hover .auth-gender__dot {
    background: rgba(255, 255, 255, 0.5);
}

.auth-gender__opt input:checked ~ .auth-gender__dot {
    background: #FFFFFF;
}

.auth-gender__opt input:checked ~ .auth-gender__dot::after {
    transform: scale(1);
}

.auth-gender__text {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #FFFFFF;
}

/* ---- Валідація форми реєстрації ---- */
/* незаповнене поле: червона рамка + легке червоне тло + трясіння */
.auth-field--error {
    animation: order-shake 0.35s ease;
}

.auth-field--error .auth-field__input {
    border-color: #F26B4F;
    background: rgba(255, 210, 198, 0.45);
}

/* стать не обрана — кружечки з червоною рамкою */
.auth-gender--error {
    animation: order-shake 0.35s ease;
}

.auth-gender--error .auth-gender__dot {
    border-color: #F26B4F;
}

/* повідомлення про помилку під кнопкою */
.auth-error {
    display: none;
    margin-top: 17px;
    padding: 11px 20px;
    border-radius: 14px;
    background: rgba(184, 71, 48, 0.9);

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
}

.auth-error.is-open {
    display: block;
    animation: order-shake 0.35s ease;
}

/* ===================== СТОРІНКА СТАТУСІВ (statuses.php) ===================== */

.statuses {
    width: min(836px, 94vw);       /* ширина таблиць — регулюється тут */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 46px;                     /* відстань між таблицями (з місцем під шапку) */
}

/* Ширина колонки з назвами показників (Очки, Наставник...) */
.status-table {
    --label-w: 150px;
    position: relative;
    padding-top: 26px;             /* місце, щоб зелена шапка виступала над карткою */
}

/* ---- Зелена шапка зі статусами ---- */
.status-table__head {
    position: absolute;
    top: -16px;                    /* шапка піднята трохи вище — регулюється тут */
    left: var(--label-w);          /* шапка стоїть над колонками даних */
    right: 26px;
    z-index: 1;

    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    align-items: center;

    background: #7DC94E;
    border-radius: 18px;
    box-shadow: 0 6px 0 0 #389238;   /* темна "товщина" знизу */
    padding: 22px 6px 20px;          /* висота шапки — регулюється тут */
}

.status-table__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.status-table__name {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #FFFFFF;
    letter-spacing: 0.3px;
    text-align: center;
}

.status-table__stars {
    display: inline-flex;
    gap: 3px;
}

.status-table__stars img {
    width: 12px;                   /* розмір зірочки — регулюється тут */
    height: 12px;
    object-fit: contain;
}

/* ---- Біла картка з рядками ---- */
.status-table__card {
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0 8px 0 0 #F0F0F0;   /* та сама сіра тінь, що в картках дня */
    padding: 24px 26px 6px 0;        /* зверху — місце під низ шапки */
    overflow: hidden;
}

.status-table__row {
    display: grid;
    grid-template-columns: var(--label-w) repeat(var(--cols), 1fr);
    align-items: center;
    min-height: 60px;              /* висота рядка — регулюється тут */
    border-bottom: 1px solid #f2f2f2;
}

.status-table__row:last-child {
    border-bottom: none;
}

.status-table__label {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #6b6b6b;
    padding-left: 34px;
}

/* Клітинки з тонкими вертикальними лініями між колонками */
.status-table__cell {
    height: 100%;
    min-height: 60px;
    border-left: 1px solid #f2f2f2;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #9a9a9a;
    text-align: center;
    padding: 0 6px;
}

/* зелена галочка / червоний хрестик / фотоапарат */
.status-table__cell--yes {
    font-size: 17px;
    font-weight: 800;
    color: #58A82F;
}

.status-table__cell--no {
    font-size: 15px;
    font-weight: 800;
    color: #E25246;
}

.status-table__cell--cam {
    font-size: 18px;
}

/* ---- Стрічка з правилами нарахування балів (біжить вправо) ---- */
.ticker {
    background: #FFFFFF;
    overflow: hidden;
    padding: 17px 0;
    white-space: nowrap;
    flex-shrink: 0;                /* стрічку не стискає флекс сторінки */
}

/* фрази рівномірно розкладені по ширині, без руху */
.ticker__track {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.ticker__item {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #4a4a4a;
}

/* ===================== АДАПТИВ — НОУТБУКИ (1280–1600) ===================== */
/* База розрахована на 1920. Тут — зменшення ~×0.8 для ноутбуків
   1366×768, 1440×900, 1536×864, 1600×900. Головне — менший хедер
   (більше місця ромашці) і модалка звіту, що влазить у 768 по висоті. */
@media (max-width: 1600px) {

    /* --- Хедер --- */
    .header__inner {
        padding: 26px 48px;
    }

    .btn-report {
        height: 61px;
        padding: 0 31px;
        gap: 13px;
        font-size: 16px;
    }

    .btn-report__icon {
        width: 26px;
        height: 26px;
    }

    .logo__img {
        height: 86px;
    }

    .header__right {
        gap: 23px;
    }

    .icon-btn {
        width: 61px;
        height: 61px;
    }

    .icon-btn__img {
        width: 25px;
        height: 25px;
    }

    #searchOpen .icon-btn__img {
        width: 23px;
        height: 23px;
    }

    .icon-btn__badge {
        right: -7px;
        bottom: -7px;
        width: 29px;
        height: 29px;
        font-size: 13px;
    }

    .profile__avatar {
        width: 97px;
        height: 97px;
        margin-top: -20px;
    }

    /* --- Ромашка --- */
    /* Ширину не ріжемо (660, як у базі) — на цих екранах квітку й так
       обмежує висота. Менший padding .main віддає їй ще ~20px. */
    .main {
        padding: 10px;
    }

    /* --- Модалка "Дати звіт" — має влазити у висоту 768 --- */
    .report {
        max-width: 695px;
        --gate-band: 40px;
        --gate-grow: 40px;
        --note-thick: 9px;
        height: calc(595px + var(--gate-extra));
        border-radius: 26px;
        padding: 48px 40px 40px;
        padding-bottom: calc(var(--gate-band) + var(--gate-extra));
    }

    .report__header {
        top: -29px;
        width: 595px;
        height: 77px;
        border-radius: 22px;
        box-shadow: 0 9px 0 0 #389238;
        padding: 0 25px;
    }

    .report__header-left {
        gap: 12px;
        font-size: 14px;
    }

    .report__header-icon {
        width: 23px;
        height: 23px;
    }

    .report__day {
        gap: 7px;
        font-size: 13px;
    }

    .report__day svg {
        width: 14px;
        height: 14px;
    }

    .report__checks {
        width: 598px;
        column-gap: 18px;
        padding: 0 20px;
    }

    .check__box {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        margin-right: -13px;
    }

    .check__box img {
        width: 15px;
        height: 15px;
    }

    .check__pill {
        gap: 13px;
        height: 70px;
        max-width: 218px;
        padding: 0 19px 0 30px;
    }

    .check__icon {
        width: 24px;
        height: 24px;
    }

    .check__text {
        font-size: 16px;
    }

    .report__note {
        width: 598px;
        height: 160px;
        border-radius: 20px;
        box-shadow: 0 9px 0 0 #389238;
        padding: 18px 20px 13px;
    }

    .report__textarea {
        font-size: 15px;
    }

    .report__note-right {
        gap: 13px;
    }

    .report__tool img {
        width: 22px;
        height: 22px;
    }

    .report__send {
        width: 41px;
        height: 41px;
        border-radius: 11px;
    }

    .report__send img {
        width: 21px;
        height: 21px;
    }

    /* Панель емодзі */
    .emoji-picker {
        bottom: 58px;
        right: 13px;
        width: 300px;
        max-height: 205px;
    }

    .emoji-picker button {
        font-size: 20px;
    }

    /* --- Вікно пошуку --- */
    .search-overlay {
        padding-top: 90px;
    }

    /* --- Сторінка дня (day.php) — ~×0.83 від бази, щоб влазило в 768 по висоті --- */
    .day-pill {
        width: 390px;                      /* 468 × 0.83 */
        height: 57px;
        border-radius: 0 0 67px 67px;
        box-shadow: 0 5px 0 0 #389238;
        font-size: 13px;
    }

    .tasks {
        grid-template-columns: repeat(2, 309px);   /* 370 × 0.83 */
        gap: 10px;
    }

    .task-card {
        height: 95px;
        padding: 0 43px;
        gap: 18px;
        box-shadow: 0 7px 0 0 #F0F0F0;
    }

    .tasks .task-card:nth-child(1) { border-radius: 67px 0 0 0; }
    .tasks .task-card:nth-child(2) { border-radius: 0 67px 0 0; }
    .tasks .task-card:nth-child(5) { border-radius: 0 0 0 67px; }
    .tasks .task-card:nth-child(6) { border-radius: 0 0 67px 0; }

    .task-card:hover {
        box-shadow: 0 10px 0 0 #F0F0F0;
    }

    .task-card__icon {
        font-size: 32px;
    }

    .task-card__icon-img { --task-icon: 37px; }

    .task-card__text {
        font-size: 17px;
    }

    /* --- Сторінка "Хліб" (bread.php) — ~×0.83, щоб плеєр влазив у 768 по висоті --- */
    .bread {
        width: min(730px, 100%);           /* 880 × 0.83 */
        gap: 16px;
    }

    .bread-note {
        font-size: 14px;
        max-width: 540px;
    }

    .player {
        width: min(730px, 100%);
        border-radius: 23px;
    }

    .player__big {
        width: 76px;
        height: 76px;
    }

    .player__controls {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 10px 14px 8px;
        border-radius: 17px;
    }

    .player__btn {
        width: 34px;
        height: 34px;
    }

    .player__time {
        font-size: 12px;
    }

    .player__volume {
        width: 70px;
    }

    /* --- Сторінка вдячності (gratitude.php) — ~×0.83 --- */
    .gratitude-hint {
        margin-top: 15px;
        font-size: 13px;
    }

    .balloon {
        width: 141px;                      /* 170 × 0.83 */
    }

    .balloon__body {
        height: 166px;
        padding: 17px 18px;
    }

    .balloon__text {
        font-size: 14px;
    }

    .balloon__knot {
        width: 13px;
        height: 10px;
    }

    .balloon__string {
        height: 58px;
    }

    .gratitude-edit {
        width: 53px;
        height: 53px;
        bottom: 15px;
        box-shadow: 0 3px 0 0 #389238;
    }

    .thanks-modal {
        max-width: 432px;
        border-radius: 23px;
        padding: 48px 28px 25px;
    }

    .thanks-modal__header {
        top: -22px;
        width: 332px;
        height: 53px;
        font-size: 13px;
        box-shadow: 0 6px 0 0 #389238;
    }

    .thanks-list {
        max-height: 250px;
    }

    /* --- Сторінка ігор (games.php): хаб вибору гри — ~×0.83.
       Самі ігри всередині поки не адаптовані. --- */
    .ghub {
        gap: 23px;
    }

    .gcard {
        width: 249px;
        min-height: 249px;
        border-radius: 20px;
        padding: 25px 23px 47px;
    }

    .gcard__num {
        font-size: 28px;
        letter-spacing: 2.5px;
        margin-bottom: 12px;
    }

    .gcard__title {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .gcard__desc {
        font-size: 12px;
        margin-bottom: 17px;
    }

    .gcard__tag {
        padding: 6px 12px;
        border-radius: 12px;
        font-size: 10px;
    }

    .gcard__arrow {
        right: 20px;
        bottom: 15px;
        font-size: 17px;
    }

    /* --- Екрани самих ігор — ~×0.83 --- */
    .game {
        width: min(565px, 94vw);
    }

    .game__head {
        margin-bottom: 7px;
        min-height: 33px;
    }

    .game__back {
        padding: 7px 15px;
        border-radius: 25px;
        font-size: 11px;
    }

    .game__title {
        font-size: 17px;
    }

    .game__hint,
    .game__progress {
        font-size: 12px;
        margin-bottom: 13px;
    }

    .game__actions {
        gap: 13px;
        margin-top: 15px;
    }

    .game__shuffle {
        font-size: 12px;
    }

    .game__result {
        margin-top: 12px;
        font-size: 13px;
        min-height: 17px;
    }

    .game__over {
        gap: 17px;
        padding: 25px 0 8px;
    }

    .game__score {
        font-size: 18px;
    }

    .games-main .btn-green,
    .gmodal .btn-green {
        padding: 12px 28px;
        font-size: 12px;
    }

    .order-list {
        gap: 8px;
    }

    .order-item {
        gap: 12px;
        border-radius: 13px;
        border-left-width: 4px;
        padding: 11px 15px;
    }

    .order-item__grip { font-size: 13px; }
    .order-item__icon { font-size: 18px; }
    .order-item__text { font-size: 13px; }

    .tf-card {
        min-height: 108px;
        border-radius: 18px;
        padding: 22px 28px;
        margin-bottom: 18px;
    }

    .tf-card__text {
        font-size: 16px;
    }

    .tf-btns {
        gap: 15px;
    }

    .tf-btn {
        padding: 13px 28px;
        border-radius: 25px;
        font-size: 13px;
    }

    .dayq-days {
        gap: 10px;
    }

    .dayq-btn {
        width: 43px;
        height: 43px;
        font-size: 15px;
    }

    .gmodal__box {
        width: min(332px, calc(100vw - 40px));
        padding: 25px 23px 22px;
        border-radius: 20px;
    }

    .gmodal__icon {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .gmodal__title {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .gmodal__text {
        font-size: 13px;
        margin-bottom: 18px;
    }

    /* --- Ігри Буття 2 (вівторок) --- */
    .eden-stats { gap: 18px; margin-bottom: 12px; }
    .eden-stat  { font-size: 13px; }

    .eden-field {
        width: min(515px, 92vw);
        height: 300px;
        border-radius: 20px;
    }

    .eden-fruit {
        width: 48px;
        height: 48px;
        font-size: 23px;
    }

    .mem-grid { gap: 12px; }

    .mem-card__face {
        padding: 10px;
        border-radius: 15px;
        font-size: 11px;
    }

    .mem-card__face--back { font-size: 22px; }
    .mem-card--name .mem-card__face--front { font-size: 14px; }

    .verse-line {
        min-height: 76px;
        gap: 7px;
        padding: 15px 18px;
        border-radius: 17px;
    }

    .verse-word { font-size: 14px; }

    .verse-ref {
        margin: 8px 0 13px;
        font-size: 11px;
    }

    .verse-bank { gap: 8px; }

    .verse-chip {
        padding: 8px 13px;
        font-size: 13px;
    }

    /* --- Ігри Буття 3 (середа) --- */
    .who-btns {
        width: min(382px, 100%);
        gap: 10px;
    }

    .who-btn {
        padding: 12px 8px;
        border-radius: 17px;
        font-size: 13px;
    }

    .sort-pool {
        gap: 8px;
        min-height: 45px;
        padding: 10px;
        margin-bottom: 15px;
    }

    .sort-card {
        max-width: 216px;
        padding: 8px 12px;
        border-radius: 13px;
        font-size: 12px;
    }

    .sort-zones { gap: 12px; }

    .sort-zone {
        min-height: 125px;
        padding: 12px 10px;
        border-radius: 17px;
    }

    .sort-zone__title {
        margin-bottom: 10px;
        font-size: 13px;
    }

    .fade-bar {
        width: min(349px, 100%);
        height: 7px;
        margin-bottom: 15px;
    }

    .fade-verse {
        min-height: 80px;
        gap: 7px;
        padding: 17px 20px;
        border-radius: 17px;
    }

    .fade-word { font-size: 14px; }

    .fade-slot {
        min-width: 45px;
        font-size: 14px;
    }

    /* --- Ігри Буття 4 (четвер) --- */
    .ws-grid {
        width: min(365px, 100%);
        gap: 3px;
        padding: 12px;
        border-radius: 17px;
        margin-bottom: 15px;
    }

    .ws-cell {
        border-radius: 7px;
        font-size: 12px;
    }

    .ws-words {
        gap: 7px 12px;
        margin-bottom: 13px;
    }

    .ws-word { font-size: 12px; }

    .pair-board {
        grid-template-columns: 158px minmax(0, 1fr);
        gap: 12px;
    }

    .pair-btn {
        padding: 11px 13px;
        border-radius: 13px;
        font-size: 13px;
    }

    .tree {
        gap: 5px;
        margin-bottom: 17px;
    }

    .tree-name,
    .tree-slot {
        min-width: 125px;
        padding: 9px 17px;
        border-radius: 13px;
        font-size: 14px;
    }

    .tree-arrow { font-size: 12px; }

    /* --- Ігри Буття 5 (п'ятниця) --- */
    .gen-bar { width: min(349px, 100%); height: 7px; margin-bottom: 13px; }

    .tree--compact { width: min(249px, 100%); margin-bottom: 13px; }
    .tree--compact .tree-name,
    .tree--compact .tree-slot { padding: 7px 15px; font-size: 13px; }
    .tree--compact .tree-arrow { font-size: 11px; }
    .tree-years { font-size: 10px; }

    .guess-box {
        width: min(382px, 100%);
        padding: 18px 20px 13px;
        border-radius: 17px;
        margin-bottom: 17px;
    }
    .guess-value { margin-bottom: 10px; font-size: 28px; }
    .guess-scale { margin-top: 5px; font-size: 10px; }

    .calc-screen {
        width: min(216px, 100%);
        padding: 12px 17px;
        border-radius: 13px;
        margin-bottom: 13px;
        font-size: 25px;
    }
    .calc-pad { grid-template-columns: repeat(3, 61px); gap: 8px; }
    .calc-key { height: 48px; border-radius: 13px; font-size: 17px; }

    /* --- Ігри Буття 6 (субота) --- */
    .ark-hold {
        gap: 7px;
        min-height: 80px;
        padding: 10px;
        border-radius: 17px 17px 7px 7px;
        margin-bottom: 10px;
    }
    .ark-tally { gap: 7px; margin-bottom: 13px; }
    .tally { padding: 4px 9px; border-radius: 10px; font-size: 11px; }
    .ark-yard { gap: 7px; min-height: 58px; }
    .beast { width: 45px; height: 45px; border-radius: 13px; font-size: 22px; }

    .ark-view {
        width: min(382px, 100%);
        height: 158px;
        padding: 12px;
        border-radius: 17px;
    }
    .ark-size { margin: 10px 0 13px; font-size: 13px; }
    .ark-dims { gap: 8px; width: min(299px, 100%); }
    .dim {
        grid-template-columns: 70px 35px 1fr 35px 18px;
        gap: 7px;
        padding: 7px 10px;
        border-radius: 13px;
    }
    .dim__label { font-size: 12px; }
    .dim__btn { height: 28px; border-radius: 8px; font-size: 15px; }
    .dim__value { font-size: 18px; }
    .dim__mark { font-size: 13px; }

    .slip-line { gap: 6px; padding: 18px 20px; border-radius: 17px; }
    .slip-word { padding: 4px 7px; border-radius: 8px; font-size: 14px; }

    /* --- Ігри Буття 7 (неділя) --- */
    .crew-grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 8px; }
    .crew-card { gap: 5px; padding: 12px 7px; border-radius: 15px; }
    .crew-card__icon { font-size: 22px; }
    .crew-card__name { font-size: 11px; }

    .flood { width: min(382px, 100%); height: 108px; border-radius: 15px; margin-bottom: 15px; }
    .flood__ark { font-size: 27px; }
    .flood-opts { gap: 8px; width: min(382px, 100%); }
    .flood-opt { padding: 11px 15px; border-radius: 13px; font-size: 13px; }

    .nums-bank { gap: 8px; margin-bottom: 15px; min-height: 40px; }
    .nums-chip { min-width: 51px; padding: 7px 12px; border-radius: 12px; font-size: 18px; }
    .nums-list { gap: 8px; }
    .nums-line { padding: 11px 15px; border-radius: 13px; font-size: 13px; }
    .nums-line__ref { margin-left: 7px; font-size: 10px; }
    .nums-slot { min-width: 43px; font-size: 16px; }

    /* --- Повторення тижня (неділя) --- */
    .game--wide { width: min(598px, 94vw); }

    .wk { width: 208px; height: 208px; margin: 3px 0 12px; }
    .wk__petal { width: 38px; height: 80px; margin-left: -19px; }
    .wk__label { top: 10px; font-size: 10px; }
    .wk__center { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
    .wk__center b { font-size: 22px; }
    .wk__center span { font-size: 10px; }
    .wk-note { margin-bottom: 17px; font-size: 11px; }

    .rev-modes { gap: 12px; }
    .rev-mode { min-width: 158px; padding: 13px 18px; border-radius: 17px; }
    .rev-mode b { font-size: 14px; }
    .rev-mode span { font-size: 11px; }

    .rev-bar { width: min(382px, 100%); height: 7px; margin-bottom: 15px; }
    .rev-card { padding-top: 28px; }
    .rev-chapter { top: 10px; padding: 3px 10px; border-radius: 10px; font-size: 10px; }
    .rev-answer { gap: 8px; width: min(382px, 100%); }
    .rev-opt { padding: 11px 15px; border-radius: 13px; font-size: 13px; }
    .rev-input { gap: 8px; }
    .rev-input__field { padding: 11px 15px; border-radius: 13px; font-size: 13px; }

    .rev-report { gap: 7px; width: min(349px, 100%); }
    .rev-row { gap: 10px; padding: 9px 13px; border-radius: 12px; }
    .rev-row b { font-size: 13px; }
    .rev-row span { font-size: 12px; }
    .rev-row i { font-size: 10px; }

    /* --- Сторінка входу (login.php) — ~×0.83, щоб картка влазила у 768 --- */
    .auth-card {
        width: min(548px, 94vw);
        min-height: 603px;
        padding: 31px 37px 40px;
        border-radius: 125px;
    }

    .auth-card__logo {
        height: 71px;
        margin-bottom: 20px;
    }

    .auth-card__title {
        font-size: 28px;
        margin-bottom: 35px;
    }

    .auth-form {
        width: 310px;
        gap: 14px;
    }

    .auth-field + .auth-field { margin-top: 14px; }

    .auth-field__icon {
        left: 18px;
        width: 20px;
        height: 20px;
    }

    .auth-field__input {
        height: 67px;
        padding: 0 20px 0 51px;
        border-radius: 33px;
        font-size: 14px;
    }

    .auth-row {
        padding: 0 5px;
        margin-top: 14px;
        margin-bottom: 14px;
    }

    .auth-remember { gap: 7px; font-size: 12px; }

    .auth-remember__box {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        font-size: 11px;
    }

    .auth-forgot { font-size: 12px; }

    .auth-submit {
        height: 67px;
        margin-top: 6px;
        border-radius: 33px;
        font-size: 14px;
    }

    .auth-alt {
        margin-top: 35px;
        font-size: 15px;
    }

    .auth-card__cross {
        bottom: -27px;
        width: 33px;
    }

    /* реєстрація: п'ять полів — трохи компактніші, щоб картка влазила у 768 */
    .auth-card--register .auth-field__input { height: 58px; }

    .auth-card--register .auth-submit {
        height: 58px;
        margin-top: 14px;
    }

    .auth-gender {
        gap: 26px;
        margin-top: -13px;
        margin-bottom: 8px;
    }

    .auth-gender__label { font-size: 14px; }
    .auth-gender__dot { width: 16px; height: 16px; }
    .auth-gender__dot::after { inset: 3px; }
    .auth-gender__text { font-size: 12px; }

    /* --- Сторінка статусів + стрічка правил — ~×0.83 --- */
    .ticker { padding: 14px 0; }
    .ticker__item { font-size: 11px; }

    .statuses {
        width: min(694px, 94vw);
        gap: 38px;
    }

    .status-table { --label-w: 125px; }

    .status-table__head {
        top: -13px;
        right: 22px;
        border-radius: 15px;
        box-shadow: 0 5px 0 0 #389238;
        padding: 18px 5px 17px;
    }

    .status-table__name { font-size: 13px; }
    .status-table__stars img { width: 10px; height: 10px; }

    .status-table__card {
        border-radius: 20px;
        box-shadow: 0 7px 0 0 #F0F0F0;
        padding: 20px 22px 5px 0;
    }

    .status-table__row { min-height: 50px; }

    .status-table__label {
        font-size: 13px;
        padding-left: 28px;
    }

    .status-table__cell { min-height: 50px; font-size: 11px; }
    .status-table__cell--yes { font-size: 14px; }
    .status-table__cell--no  { font-size: 13px; }
    .status-table__cell--cam { font-size: 15px; }

    /* --- Налаштування: компактніша картка, щоб влазила у 768 --- */
    .account { margin-top: 14px; }
    .account__card { padding: 18px 34px; }
    .account__avatar { width: 44px; height: 44px; }
    .account__name { font-size: 16px; }
    .account__divider { margin: 12px 0 14px; }
    .account__subtitle { margin: 12px 0 8px; font-size: 12px; }

    .settings-field { gap: 4px; margin-bottom: 10px; }
    .settings-field__label { font-size: 12px; }
    .settings-input { padding: 8px 15px; font-size: 13px; border-radius: 12px; }

    .btn-green--full { margin-top: 6px; padding: 12px 0; }
    .settings-msg { margin-top: 10px; font-size: 12px; }
}

/* ===================== МОБІЛЬНА ГОЛОВНА ===================== */
/* Окремий мобільний/планшетний макет головної (вибір дня + список завдань).
   На десктопі схований, показується в блоці ≤1150px нижче. */
.m-home {
    display: none;
}

/* Мобільний верхній ряд на під-сторінках — на десктопі схований */
.m-top--page {
    display: none;
}

/* Мобільна кнопка "Повернутись" — на десктопі схована */
.m-back {
    display: none;
}

/* ===================== АДАПТИВ — МОБІЛЬНІ І ПЛАНШЕТИ (≤1150) ===================== */
/* Головна отримує мобільний макет (.m-home). Під-сторінки (статуси, день...) —
   компактніший хедер, .main колонкою, таблиці статусів гортаються пальцем. */
@media (max-width: 1150px) {

    /* Сторінка скролиться, якщо вміст довший за екран */
    body {
        height: auto;
        min-height: 100dvh;
    }

    /* Десктопний макет головної (ромашка) ховаємо ТІЛЬКИ там, де є .m-home */
    body:has(.m-home) .header,
    body:has(.m-home) .main,
    body:has(.m-home) .progress {
        display: none;
    }

    /* На сторінках з мобільним верхом (ряд або кнопка "назад") — десктопний хедер схований */
    body:has(.m-top--page) .header,
    body:has(.m-back) .header {
        display: none;
    }

    .m-top--page {
        display: flex;
        margin: clamp(10px, 1.9dvh, 16px) 36px 0;
        position: relative;
        z-index: 95;                   /* над сценою з кульками — кнопки клікабельні */
    }

    /* Кнопка "Повернутись" — зелений круг зі стрілкою вліво */
    .m-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: #7AC142;
        box-shadow: 0 3px 0 0 #4E9B2E;
        margin: clamp(10px, 1.9dvh, 16px) 0 0 36px;
        position: relative;
        z-index: 95;                   /* над сценою з кульками */
    }

    .m-back img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        transform: scaleX(-1);         /* стрілка дивиться вліво */
    }

    /* Білий фон із дрібним чорним зерном (mono, ~25%) — мобільна головна і вдячність.
       RGB = чорний, прозорість береться з шуму → окремі крапки, а не суцільний сірий.
       Регулювання: baseFrequency = розмір зерна; множник альфи (0.55) = щільність/сила. */
    body:has(.m-home),
    body:has(.m-top--page),
    body:has(.m-back) {
        background-color: #FFFFFF;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.33 0.33 0.33 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0.3 0.45 0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    /* ---- Мобільна головна ---- */
    .m-home {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 520px;              /* на планшетах — колонка по центру */
        margin: 0 auto;
        height: 100dvh;                /* рівно екран — все підлаштовується під висоту */
        padding: clamp(10px, 1.9dvh, 16px) 34px 0;   /* бічні відступи — регулюються тут */
        gap: clamp(8px, 1.7dvh, 14px);
    }

    /* Верхній ряд — бічні відступи 36px (2 + 34 базового padding), лишились як були */
    .m-top {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 2px;
    }

    .m-user {
        flex: 3.1 1 0;                 /* іконки відповідно ширші/вужчі */
        min-width: 0;
        height: clamp(56px, 8.3dvh, 70px);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: #F7F7F7;
        border: 1px solid rgba(202, 202, 201, 0.46);   /* CACAC9 46% */
        border-radius: 24px;
        padding: 0 18px;
        text-decoration: none;
    }

    .m-user__name {
        font-family: 'TT Rounds Neue', sans-serif;
        font-weight: 600;              /* DemiBold */
        font-size: clamp(11px, 1.66dvh, 14px);
        color: #8E8E8E;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .m-user__status {
        width: clamp(28px, 4.3dvh, 36px);
        height: clamp(28px, 4.3dvh, 36px);
        object-fit: contain;
        flex-shrink: 0;
        margin-left: 13px;             /* відсунуто вправо */
    }

    /* Дзвіночок лежить усередині .notif — щоб він розтягувався, тягнемо .notif */
    .m-top .notif {
        flex: 1 1 0;
        display: flex;
    }

    /* Кнопки з іконками — розтягуються по ширині (широкі заокруглені блоки) */
    .m-round {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        height: clamp(56px, 8.3dvh, 70px);
        border-radius: 24px;
        background: #F7F7F7;
        border: 1px solid rgba(202, 202, 201, 0.46);   /* CACAC9 46% */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .m-round img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        display: block;
    }

    /* Корона адміна — той самий кружечок, лише з емодзі замість картинки */
    .m-round--crown {
        font-size: clamp(22px, 3.4dvh, 28px);
        text-decoration: none;
    }

    /* Коли зʼявляється корона, кнопок у ряду стає три. Плашку з рівнем
       тоді робимо по вмісту, а не на пів рядка: інакше всередині лишалася б
       порожнеча, а кнопки сплющувались. Решту ширини кнопки ділять між собою. */
    .m-top:has(.m-round--crown) {
        gap: 6px;
    }

    /* ряд трохи нижчий — інакше вужчі кнопки виглядають як довгі стовпчики */
    .m-top:has(.m-round--crown) .m-user,
    .m-top:has(.m-round--crown) .m-round {
        height: clamp(50px, 7.4dvh, 60px);
    }

    .m-top:has(.m-round--crown) .m-user {
        flex: 0 1 auto;
        padding: 0 10px;
    }

    /* значок статусів лишається, просто трохи менший і ближче до тексту */
    .m-top:has(.m-round--crown) .m-user__status {
        width: clamp(22px, 3.2dvh, 26px);
        height: clamp(22px, 3.2dvh, 26px);
        margin-left: 4px;
    }

    /* Дзвіночок */
    .notif .m-round img {
        width: clamp(30px, 4.5dvh, 38px);
        height: clamp(30px, 4.5dvh, 38px);
    }

    .m-round--avatar {
        overflow: hidden;
        background: #F7F7F7;
    }

    .m-round--avatar img {
        width: 100%;
        height: 100%;
        padding: 9px;                  /* іконка профілю менша (по 9 з боків) */
    }

    /* Червона крапка — у верхньому-правому куті самого дзвіночка (не блоку) */
    .m-round__badge {
        position: absolute;
        top: clamp(17px, 2.6dvh, 22px);   /* тримається на дзвіночку і при стисканні */
        right: calc(50% - 15px);          /* прив'язана до центру → тримається на дзвіночку */
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #D84032;
        border: none;
    }

    /* Прогрес-пілюля: задня риска F7F7F7 з обводкою CACAC9 46% */
    .m-progress {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        height: clamp(36px, 5.2dvh, 44px);
        border-radius: 24px;
        background: #F7F7F7;
        border: 1px solid rgba(202, 202, 201, 0.46);   /* CACAC9 46% */
    }

    /* верхня риска (заповнення) — біла з такою ж обводкою */
    .m-progress__fill {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        background: #FFFFFF;
        border: 1px solid rgba(202, 202, 201, 0.46);   /* CACAC9 46% */
        border-radius: 24px;
    }

    .m-progress__label {
        position: relative;
        font-family: 'TT Rounds Neue', sans-serif;
        font-weight: 400;             /* Regular */
        font-size: 15px;
        color: #7AC142;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    /* Вибір дня — зелений "дропдаун" */
    .m-day-select {
        position: relative;
        background: #82CD47;
        border-radius: 22px;
        box-shadow: 0 5px 0 0 #4E9B2E; /* цукерковий низ */
    }

    .m-day-select__field {
        width: 100%;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        border: none;
        outline: none;
        padding: clamp(16px, 2.85dvh, 24px) 31px clamp(16px, 2.85dvh, 24px) 48px;   /* зліва 48, справа 31 */
        font-family: 'TT Rounds Neue', sans-serif;
        font-weight: 800;
        font-size: 18px;
        color: #FFFFFF;
        cursor: pointer;
    }

    .m-day-select__field option {
        color: #3d3d3d;                /* список опцій — темний текст */
    }

    .m-day-select__chevron {
        position: absolute;
        right: 25px;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        object-fit: contain;
        pointer-events: none;
    }

    /* Список завдань — займає вільну висоту, картки діляться нею */
    .m-tasks {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: clamp(7px, 1.4dvh, 12px);
    }

    /* Висота картки "гумова": на високих екранах — до 76px,
       на низьких стискається до 46px */
    .m-task {
        display: flex;
        align-items: center;
        gap: 14px;
        flex: 1 1 0;
        min-height: 50px;
        max-height: 84px;
        background: #F7F7F7;                            /* як блок статусу */
        border: 1px solid rgba(202, 202, 201, 0.46);   /* CACAC9 46% */
        border-radius: 24px;
        padding: 0 21px;                               /* висоту тримає flex, не padding */
        text-decoration: none;
        transition: transform 0.1s ease;
    }

    .m-task:active {
        transform: scale(0.985);
    }

    .m-task__icon {
        width: 29px;
        height: 29px;
        object-fit: contain;
        flex-shrink: 0;
        margin-right: 8px;             /* більший відступ від іконки до тексту */
    }

    .m-task__body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        /* відступ між назвою і підписом — гумовий (менший на низьких екранах) */
        gap: clamp(3px, 0.6dvh, 5px);
    }

    .m-task__title {
        font-family: 'TT Rounds Neue', sans-serif;
        font-weight: 700;              /* Bold */
        font-size: 16px;
        color: #797979;
    }

    .m-task__sub {
        font-family: 'TT Rounds Neue', sans-serif;
        font-weight: 200;              /* ExtraLight */
        font-size: 12px;
        color: #797979;
    }

    .m-task__go {
        width: 24px;
        height: 24px;
        aspect-ratio: 1 / 1;           /* гарантовано рівне коло, не сплюснуте */
        border-radius: 50%;
        background: #7AC142;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 0 0 #4E9B2E;
    }

    .m-task__go img {
        width: 16px;
        height: 16px;
        object-fit: contain;
        display: block;
    }

    /* Нижня плашка "Свайпни вверх" */
    .m-send {
        position: sticky;
        bottom: 0;
        margin: auto -34px 0;          /* притиснута донизу + на всю ширину */
        border: none;
        background: #F7F7F7;                            /* як картки завдань */
        border: 1px solid rgba(202, 202, 201, 0.46);   /* CACAC9 46% */
        border-bottom: none;
        border-radius: 200px 200px 0 0;                /* верхня "арка" */
        padding: clamp(8px, 1.4dvh, 12px) 0 clamp(10px, 1.7dvh, 14px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        cursor: pointer;
    }

    .m-send__text {
        font-family: 'TT Rounds Neue', sans-serif;
        font-weight: 100;              /* Thin */
        font-size: 18px;
        color: #737373;
    }

    .m-send__chevron {
        width: 24px;
        height: 24px;
        object-fit: contain;
        display: block;
        position: relative;
        top: 9px;                      /* рисочка трохи нижче */
    }

    /* .main тече колонкою і скролиться */
    .main {
        display: block;
        height: auto;
        min-height: 0;
        padding: 16px 0;
    }

    /* Компактний хедер на під-сторінках (на головній він схований) */
    .header__inner {
        padding: 10px 12px;
        gap: 8px;
    }

    .header__inner .btn-report {
        height: 44px;
        padding: 0 14px;
        gap: 8px;
        font-size: 12px;
    }

    .header__inner .btn-report__icon {
        width: 19px;
        height: 19px;
    }

    .header__inner .logo__img {
        height: 44px;
    }

    .header__right {
        gap: 8px;
    }

    .header__inner .icon-btn {
        width: 42px;
        height: 42px;
    }

    .header__inner .icon-btn__img {
        width: 18px;
        height: 18px;
    }

    .header__inner #searchOpen .icon-btn__img {
        width: 17px;
        height: 17px;
    }

    .header__inner .profile__avatar {
        width: 50px;
        height: 50px;
        margin-top: -8px;
    }

    .header__inner .profile__chevron svg {
        width: 15px;
        height: 9px;
    }

    /* дропдаун сповіщень на мобільному — на всю ширину екрана з відступами,
       під верхнім рядом (інакше вилазив за лівий край) */
    .notif__dropdown {
        position: fixed;
        left: 20px;
        right: 20px;
        top: calc(clamp(10px, 1.9dvh, 16px) + clamp(56px, 8.3dvh, 70px) + 12px);
        width: auto;
        max-width: none;
        font-size: 14px;
        padding: 16px 20px;
    }

    /* ---- Модалка звіту — гумова під телефон ---- */
    .report-overlay {
        /* зверху 70px: 34px шапки, що виступає над модалкою, + 36px повітря; знизу 36px */
        padding: 70px 16px 36px;
    }

    .report {
        max-width: 430px;
        /* модалка стискається під низькі екрани, відступи зверху/знизу лишаються завжди */
        --gate-band: 16px;
        --gate-grow: 34px;
        --note-thick: 7px;
        height: calc(min(720px, calc(100vh - 106px)) + var(--gate-extra));
        height: calc(min(720px, calc(100dvh - 106px)) + var(--gate-extra));
        min-height: calc(520px + var(--gate-extra));                 /* менше цього не стискається — далі оверлей прокручується */
        border-radius: 20px;
        padding: 62px 16px 16px;
        padding-bottom: calc(var(--gate-band) + var(--gate-extra));
    }

    .report__header {
        top: -34px;                        /* половина висоти шапки — верх модалки по її центру */
        width: calc(100% - 36px);          /* на 8px вужча */
        height: 68px;
        border-radius: 30px;
        box-shadow: 0 7px 0 0 #389238;
        padding: 0 20px;
        justify-content: center;           /* іконка + день разом по центру шапки */
        gap: 12px;
    }

    /* у шапці лишається іконка + день, напис "Звіт наставнику" ховаємо */
    .report__header-left span {
        display: none;
    }

    .report__header-icon {
        width: 24px;
        height: 24px;
    }

    .report__day {
        gap: 5px;
        font-size: 13px;
    }

    .report__day svg {
        width: 12px;
        height: 12px;
    }

    /* чекліст — біла картка зі списком і роздільниками */
    .report__checks {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 4px 38px;
        background: #FFFFFF;
        border-radius: 20px;
        box-shadow: 0 6px 26px rgba(0, 0, 0, 0.09);
        margin-bottom: 16px;
    }

    /* порядок рядків мобільного макета */
    .check:nth-child(1) { order: 1; }      /* Хліб */
    .check:nth-child(2) { order: 2; }      /* Старий заповіт */
    .check:nth-child(3) { order: 6; }      /* Ігри — останні */
    .check:nth-child(4) { order: 3; }      /* Новий заповіт */
    .check:nth-child(5) { order: 5; }      /* Розсилки */
    .check:nth-child(6) { order: 4; }      /* Вдячність */

    .check {
        flex: 1;
        gap: 20px;
        min-height: 44px;                  /* на низьких екранах рядки стискаються до цього */
    }

    .check + .check {
        border-top: 1px solid #F1F1F1;
    }

    /* чекбокс: білий з зеленою рамкою, відмічений — зелений */
    .check__box {
        width: 15px;
        height: 15px;
        border-radius: 4px;
        margin-right: 0;
        background: #FFFFFF;
        border: 2px solid #7DC94E;
    }

    .check input:checked + .check__box {
        background: #4CAF50;
        border-color: #4CAF50;
    }

    .check__box img {
        width: 8px;
        height: 8px;
    }

    /* рядок без білої пігулки: текст зліва, іконка притиснута праворуч */
    .check__pill {
        max-width: none;
        height: auto;
        padding: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .check__icon {
        width: 30px;
        height: 30px;
    }

    .check__text {
        font-size: 15px;
    }

    .check__text--desktop { display: none; }
    .check__text--mobile { display: inline; }

    .report__note {
        width: 100%;
        height: 150px;
        flex-shrink: 0;
        border-radius: 14px;
        box-shadow: 0 7px 0 0 #389238;
        padding: 21px 21px 10px 21px;      /* текст на 21px від верху і від країв */
    }

    .report__textarea {
        font-size: 13px;
    }

    .report__note-right {
        gap: 10px;
    }

    .report__tool img {
        width: 18px;
        height: 18px;
    }

    .report__send {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .report__send img {
        width: 17px;
        height: 17px;
    }

    .emoji-picker {
        bottom: 44px;
        right: 8px;
        width: min(260px, calc(100vw - 60px));
        max-height: 170px;
    }

    .emoji-picker button {
        font-size: 17px;
    }

    /* ---- Вікно пошуку ---- */
    .search-overlay {
        padding-top: 60px;
    }

    .search-box {
        max-width: calc(100% - 28px);
        height: 54px;
        border-radius: 14px;
        padding: 0 16px;
    }

    .search-box__input {
        font-size: 15px;
    }

    /* ---- Сторінка вдячності (кульки) ---- */
    .balloon {
        width: 150px;                  /* кульки трохи менші на телефоні */
    }

    .gratitude-hint {
        margin-top: 12px;
        padding: 0 30px;
    }

    /* Модалка "Мій список вдячності" — гумова під телефон */
    .thanks-overlay {
        padding: 14px;
    }

    .thanks-modal {
        max-width: 460px;
        padding: 48px 18px 20px;
    }

    .thanks-modal__header {
        width: calc(100% - 36px);      /* замість фіксованих 400px — не вилазить за екран */
    }

    /* ---- Сторінка статусів: таблиці гортаються пальцем убік ---- */
    .statuses {
        width: 100%;
        gap: 30px;
        padding: 0 12px;
    }

    .status-scroll-wrap {
        position: relative;
        width: 100%;
    }

    /* права підказка-градієнт: натяк, що є ще колонки далі */
    .status-scroll-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to right, rgba(255, 240, 208, 0), #FFF0D0);
        pointer-events: none;
        z-index: 4;
    }

    .status-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;          /* місце під сіру "товщину" картки */

        /* ховаємо смугу прокрутки — свайп лишається, натяк дає градієнт справа */
        scrollbar-width: none;         /* Firefox */
    }

    .status-scroll::-webkit-scrollbar {
        display: none;                 /* Chrome / Safari */
    }

    /* таблиця стає ширшою за екран → з'являється горизонтальний скрол */
    .status-table {
        --label-w: 108px;
        width: calc(var(--label-w) + var(--cols) * 108px);
        padding-top: 0;
    }

    /* Зелена шапка — тепер у звичайному потоці, над карткою */
    .status-table__head {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        grid-template-columns: var(--label-w) repeat(var(--cols), 108px);
        border-radius: 16px;
        padding: 15px 0 13px;
        margin-bottom: 12px;
    }

    /* порожній кутик над колонкою назв — маскує зелену шапку при скролі,
       "приморожений" до лівого краю */
    .status-table__head::before {
        content: '';
        position: sticky;
        left: 0;
        z-index: 2;
        background: #FFF0D0;           /* колір фону сторінки */
    }

    .status-table__name {
        font-size: 13px;
    }

    .status-table__card {
        border-radius: 18px;
        padding: 0;
        overflow: visible;             /* інакше ламається sticky-колонка назв */
    }

    .status-table__row {
        grid-template-columns: var(--label-w) repeat(var(--cols), 108px);
        min-height: 52px;
    }

    /* колонка назв (Очки, Наставник...) "приморожена" зліва при скролі */
    .status-table__label {
        position: sticky;
        left: 0;
        z-index: 3;
        background: #FFFFFF;
        padding-left: 18px;
        font-size: 14px;
    }

    .status-table__cell {
        min-height: 52px;
    }
}

/* ===================== АДАПТИВ — ВЕЛИКІ ЕКРАНИ (2K+) ===================== */
/* База зверстана під 1920px. Тут — збільшення ~на третину (×1.33) для
   моніторів 2560px (2K/QHD) і ширше. 4K зазвичай масштабується браузером
   до ~2560, тож цього брейкпоінта вистачає.
   Підписи днів (ПН, ВТ...) — текст усередині SVG, масштабуються
   разом із квіткою автоматично. */
@media (min-width: 2560px) {

    /* --- Хедер --- */
    .header__inner {
        padding: 40px 75px;
    }

    .btn-report {
        height: 84px;
        padding: 0 45px 0 41px;    /* справа ширше; звужено на 2px по ширині */
        font-size: 21px;
        box-shadow: 0 5px 0 0 #389238;
    }

    .btn-report__icon {
        width: 34px;
        height: 34px;
        margin-left: 9px;          /* серце посунуте вправо (тільки на 2K) */
    }

    .logo__img {
        height: 118px;
    }

    .header__right {
        gap: 33px;
    }

    .icon-btn {
        width: 84px;
        height: 84px;
        border-width: 4px;         /* товща рамка (тільки на 2K) */
    }

    .icon-btn__img {
        width: 33px;
        height: 33px;
    }

    #searchOpen .icon-btn__img {
        width: 32px;
        height: 32px;
    }

    .icon-btn__badge {
        right: -10px;
        bottom: -10px;
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .profile__avatar {
        width: 132px;
        height: 132px;
        margin-top: -26px;
    }

    .profile__chevron svg {
        width: 26px;
        height: 14px;
    }

    /* Дропдаун сповіщень */
    .notif__dropdown {
        top: calc(100% + 20px);
        right: -70px;
        min-width: 280px;
        border-radius: 18px;
        padding: 26px 34px;
        font-size: 20px;
    }

    /* Меню профілю (при наведенні) */
    .profile-menu {
        min-width: 240px;
        border-radius: 16px;
        padding: 18px 0;
    }

    .profile-menu__name {
        font-size: 20px;
        padding: 0 26px 16px;
    }

    .profile-menu__list {
        padding-top: 10px;
    }

    .profile-menu__link {
        font-size: 20px;
        padding: 13px 26px;
    }

    /* Вікно пошуку */
    .search-overlay {
        padding-top: 160px;
    }

    .search-box {
        max-width: 620px;
        height: 82px;
        border-radius: 20px;
        gap: 16px;
        padding: 0 26px;
    }

    .search-box__input {
        font-size: 22px;
    }

    .search-box__close svg {
        width: 26px;
        height: 26px;
    }

    /* --- Ромашка --- */
    .daisy {
        max-width: 880px;      /* розмір ромашки на 2K — регулюється тут */
    }

    /* --- Панель "Ігри" справа --- */
    .games {
        gap: 18px;
    }

    .games__lock {
        width: 24px;
        height: 24px;
    }

    .games__text {
        font-size: 21px;
    }

    .games__tab {
        width: 58px;
        height: 166px;
        border-radius: 40px 0 0 40px;
    }

    .games__diamond {
        width: 45px;
        height: 45px;
    }

    /* --- Прогрес-бар унизу --- */
    .progress {
        --track-h: 32px;
        --fill-h: 52px;
        --pad: 40px;
        --up: 24px;
    }

    .progress__fill { min-width: 80px; }

    .progress__label,
    .progress__next {
        font-size: 24px;
    }


    .progress__xp-now { font-size: 22px; }
    .progress__xp-max { font-size: 16px; }

    /* --- Модалка "Дати звіт" --- */
    .report {
        max-width: 1060px;
        --gate-band: 60px;
        --gate-grow: 61px;
        --note-thick: 13px;
        height: calc(880px + var(--gate-extra));
        border-radius: 36px;
        padding: 75px 60px 60px;
        padding-bottom: calc(var(--gate-band) + var(--gate-extra));
    }

    .report__header {
        top: -42px;
        width: 910px;
        height: 117px;
        border-radius: 32px;
        box-shadow: 0 13px 0 0 #389238;
        padding: 0 38px;
    }

    .report__header-left {
        gap: 18px;
        font-size: 21px;
    }

    .report__header-icon {
        width: 34px;
        height: 34px;
    }

    .report__day {
        gap: 10px;
        font-size: 20px;
    }

    .report__day svg {
        width: 21px;
        height: 21px;
    }

    .report__checks {
        width: 915px;
        column-gap: 26px;
        padding: 0 30px;
    }

    .check__box {
        width: 37px;
        height: 37px;
        border-radius: 10px;
        margin-right: -18px;
    }

    .check__box img {
        width: 21px;
        height: 21px;
    }

    .check__pill {
        gap: 18px;
        height: 93px;
        max-width: 330px;
        padding: 0 29px 0 44px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    }

    .check__icon {
        width: 34px;
        height: 34px;
    }

    .check__text {
        font-size: 22px;
    }

    .check__note { right: 27px; bottom: -21px; font-size: 13px; }

    .report__note {
        width: 915px;
        height: 240px;
        border-radius: 29px;
        box-shadow: 0 13px 0 0 #389238;
        padding: 26px 30px 18px;
    }

    .report__textarea {
        font-size: 21px;
    }

    .report__note-right {
        gap: 18px;
    }

    .report__tool img {
        width: 32px;
        height: 32px;
    }

    .report__send {
        width: 58px;
        height: 58px;
        border-radius: 16px;
    }

    .report__send img {
        width: 29px;
        height: 29px;
    }

    /* Панель емодзі */
    .emoji-picker {
        bottom: 84px;
        right: 18px;
        width: 420px;
        max-height: 290px;
        border-radius: 20px;
        padding: 16px;
    }

    .emoji-picker button {
        font-size: 29px;
        padding: 6px;
    }

    /* --- Сторінка дня (day.php) --- */
    .day-pill {
        width: 624px;                      /* 468 × 1.33 */
        height: 91px;
        border-radius: 0 0 106px 106px;
        box-shadow: 0 8px 0 0 #389238;
        font-size: 20px;
        letter-spacing: 1.3px;
    }

    .tasks {
        grid-template-columns: repeat(2, 493px);   /* 370 × 1.33 */
        gap: 16px;
    }

    .task-card {
        height: 152px;
        padding: 0 69px;
        gap: 29px;
        box-shadow: 0 11px 0 0 #F0F0F0;
    }

    .tasks .task-card:nth-child(1) { border-radius: 106px 0 0 0; }
    .tasks .task-card:nth-child(2) { border-radius: 0 106px 0 0; }
    .tasks .task-card:nth-child(5) { border-radius: 0 0 0 106px; }
    .tasks .task-card:nth-child(6) { border-radius: 0 0 106px 0; }

    .task-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 0 0 #F0F0F0;
    }

    .task-card__icon {
        font-size: 51px;
    }

    .task-card__icon-img { --task-icon: 59px; }

    .task-card__text {
        font-size: 27px;
    }

    /* --- Сторінка "Хліб" (bread.php) — ×1.33 --- */
    .bread {
        width: min(1170px, 100%);          /* 880 × 1.33 */
        gap: 27px;
    }

    .bread-note {
        font-size: 21px;
        max-width: 850px;
    }

    .player {
        width: min(1170px, 100%);
        border-radius: 37px;
    }

    .player__big {
        width: 122px;
        height: 122px;
        box-shadow: 0 7px 0 0 #389238, 0 16px 45px rgba(0, 0, 0, 0.35);
    }

    .player__big svg {
        width: 45px;
        height: 45px;
    }

    .player__controls {
        left: 19px;
        right: 19px;
        bottom: 19px;
        padding: 16px 21px 13px;
        border-radius: 27px;
        gap: 13px;
    }

    .player__progress {
        height: 11px;
    }

    .player__progress:hover {
        height: 15px;
    }

    .player__progress-knob {
        right: -10px;
        width: 21px;
        height: 21px;
        border-width: 4px;
    }

    .player__btn {
        width: 53px;
        height: 53px;
    }

    .player__btn svg {
        width: 29px;
        height: 29px;
    }

    .player__time {
        margin-left: 8px;
        font-size: 17px;
    }

    .player__speed {
        padding: 0 16px;
        font-size: 19px;
    }

    .player__volume {
        width: 112px;
        height: 8px;
    }

    .player__volume::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
        border-width: 4px;
    }

    .player__volume::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-width: 4px;
    }

    /* --- Сторінка вдячності (gratitude.php) — ×1.33 --- */
    .gratitude-hint {
        margin-top: 24px;
        font-size: 20px;
    }

    .balloon {
        width: 226px;                      /* 170 × 1.33 */
    }

    .balloon__body {
        height: 266px;
        padding: 27px 29px;
    }

    .balloon__text {
        font-size: 23px;
    }

    .balloon__knot {
        width: 21px;
        height: 16px;
        margin-top: -5px;
    }

    .balloon__string {
        width: 27px;
        height: 93px;
    }

    .gratitude-edit {
        width: 85px;
        height: 85px;
        bottom: 24px;
        box-shadow: 0 5px 0 0 #389238;
    }

    .gratitude-edit svg {
        width: 35px;
        height: 35px;
    }

    .thanks-modal {
        max-width: 692px;
        border-radius: 37px;
        padding: 77px 45px 40px;
    }

    .thanks-modal__header {
        top: -35px;
        width: 532px;
        height: 85px;
        border-radius: 27px;
        box-shadow: 0 9px 0 0 #389238;
        gap: 19px;
        font-size: 21px;
    }

    .thanks-modal__close {
        right: 21px;
        width: 43px;
        height: 43px;
        font-size: 19px;
    }

    .thanks-tabs {
        gap: 11px;
        margin-bottom: 21px;
        padding-bottom: 21px;
    }

    .thanks-tab {
        gap: 11px;
        padding: 11px 21px;
        border-radius: 40px;
        font-size: 17px;
    }

    .thanks-tab__btn {
        width: 29px;
        height: 29px;
        font-size: 15px;
    }

    .thanks-tab__input {
        width: 160px;
        font-size: 17px;
    }

    .thanks-tab--add {
        font-size: 21px;
        padding: 11px 19px;
    }

    .thanks-count {
        gap: 19px;
        margin-bottom: 24px;
        padding-bottom: 24px;
    }

    .thanks-count__label {
        font-size: 19px;
    }

    .thanks-count__range {
        height: 11px;
    }

    .thanks-count__range::-webkit-slider-thumb {
        width: 32px;
        height: 32px;
        border-width: 4px;
    }

    .thanks-count__range::-moz-range-thumb {
        width: 32px;
        height: 32px;
        border-width: 4px;
    }

    .thanks-count__value {
        width: 45px;
        height: 45px;
        font-size: 20px;
        box-shadow: 0 4px 0 0 #389238;
    }

    .thanks-list {
        max-height: 400px;
        gap: 11px;
    }

    .thanks-list__item {
        gap: 11px;
    }

    .thanks-list__input {
        padding: 15px 21px;
        border-radius: 16px;
        font-size: 20px;
    }

    .thanks-list__del {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .thanks-list__empty {
        padding: 29px 0;
        font-size: 19px;
    }

    .thanks-add {
        gap: 13px;
        margin-top: 24px;
        padding-top: 24px;
    }

    .thanks-add__input {
        padding: 16px 24px;
        border-radius: 40px;
        font-size: 20px;
    }

    .thanks-add__btn {
        padding: 0 35px;
        border-radius: 40px;
        font-size: 19px;
        box-shadow: 0 5px 0 0 #389238;
    }

    /* --- Сторінка ігор (games.php): хаб вибору гри — ×1.33.
       Самі ігри всередині поки не адаптовані. --- */
    .ghub {
        gap: 37px;
    }

    .gcard {
        width: 399px;
        min-height: 399px;
        border-radius: 32px;
        border-left-width: 7px;
        padding: 40px 37px 74px;
    }

    .gcard__num {
        font-size: 45px;
        letter-spacing: 4px;
        margin-bottom: 19px;
    }

    .gcard__title {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .gcard__desc {
        font-size: 19px;
        margin-bottom: 27px;
    }

    .gcard__tag {
        padding: 9px 19px;
        border-radius: 19px;
        font-size: 16px;
    }

    .gcard__arrow {
        right: 32px;
        bottom: 24px;
        font-size: 27px;
    }

    /* --- Екрани самих ігор — ×1.33 --- */
    .game {
        width: min(904px, 94vw);
    }

    .game__head {
        margin-bottom: 11px;
        min-height: 53px;
    }

    .game__back {
        padding: 12px 24px;
        border-width: 3px;
        border-radius: 40px;
        font-size: 17px;
    }

    .game__title {
        font-size: 27px;
    }

    .game__hint,
    .game__progress {
        font-size: 19px;
        margin-bottom: 21px;
    }

    .game__actions {
        gap: 21px;
        margin-top: 24px;
    }

    .game__shuffle {
        font-size: 19px;
    }

    .game__result {
        margin-top: 19px;
        font-size: 20px;
        min-height: 27px;
    }

    .game__over {
        gap: 27px;
        padding: 40px 0 13px;
    }

    .game__score {
        font-size: 29px;
    }

    .games-main .btn-green,
    .gmodal .btn-green {
        padding: 19px 45px;
        border-radius: 40px;
        font-size: 19px;
        box-shadow: 0 5px 0 0 #389238;
    }

    .order-list {
        gap: 13px;
    }

    .order-item {
        gap: 19px;
        border-radius: 21px;
        border-left-width: 7px;
        padding: 17px 24px;
    }

    .order-item__grip { font-size: 20px; }
    .order-item__icon { font-size: 29px; }
    .order-item__text { font-size: 20px; }

    .tf-card {
        min-height: 173px;
        border-radius: 29px;
        padding: 35px 45px;
        margin-bottom: 29px;
    }

    .tf-card__text {
        font-size: 25px;
    }

    .tf-btns {
        gap: 24px;
    }

    .tf-btn {
        padding: 21px 45px;
        border-radius: 40px;
        font-size: 21px;
    }

    .tf-btn--yes { box-shadow: 0 5px 0 0 #389238; }
    .tf-btn--no  { box-shadow: 0 5px 0 0 #B84730; }
    .tf-btn--yes:hover { box-shadow: 0 8px 0 0 #389238; }
    .tf-btn--no:hover  { box-shadow: 0 8px 0 0 #B84730; }

    .dayq-days {
        gap: 16px;
    }

    .dayq-btn {
        width: 69px;
        height: 69px;
        border-width: 3px;
        font-size: 24px;
    }

    .gmodal__box {
        width: min(532px, calc(100vw - 40px));
        padding: 40px 37px 35px;
        border-radius: 32px;
    }

    .gmodal__icon {
        font-size: 51px;
        margin-bottom: 16px;
    }

    .gmodal__title {
        font-size: 25px;
        margin-bottom: 13px;
    }

    .gmodal__text {
        font-size: 20px;
        margin-bottom: 29px;
    }

    /* --- Ігри Буття 2 (вівторок) --- */
    .eden-stats { gap: 29px; margin-bottom: 19px; }
    .eden-stat  { font-size: 21px; }

    .eden-field {
        width: min(825px, 92vw);
        height: 479px;
        border-radius: 32px;
    }

    .eden-fruit {
        width: 77px;
        height: 77px;
        font-size: 37px;
    }

    .mem-grid { gap: 19px; }

    .mem-card__face {
        padding: 16px;
        border-radius: 24px;
        font-size: 17px;
    }

    .mem-card__face--back { font-size: 35px; }
    .mem-card--name .mem-card__face--front { font-size: 23px; }

    .verse-line {
        min-height: 122px;
        gap: 11px;
        padding: 24px 29px;
        border-radius: 27px;
        border-width: 3px;
    }

    .verse-word { font-size: 23px; }

    .verse-ref {
        margin: 13px 0 21px;
        font-size: 17px;
    }

    .verse-bank { gap: 13px; }

    .verse-chip {
        padding: 13px 21px;
        border-width: 3px;
        border-radius: 40px;
        font-size: 20px;
    }

    /* --- Ігри Буття 3 (середа) --- */
    .who-btns {
        width: min(612px, 100%);
        gap: 16px;
    }

    .who-btn {
        padding: 20px 13px;
        border-width: 3px;
        border-radius: 27px;
        font-size: 20px;
    }

    .sort-pool {
        gap: 13px;
        min-height: 72px;
        padding: 16px;
        border-width: 3px;
        border-radius: 24px;
        margin-bottom: 24px;
    }

    .sort-card {
        max-width: 346px;
        padding: 13px 20px;
        border-width: 3px;
        border-radius: 21px;
        font-size: 19px;
    }

    .sort-zones { gap: 19px; }

    .sort-zone {
        min-height: 200px;
        padding: 19px 16px;
        border-radius: 27px;
    }

    .sort-zone__title {
        margin-bottom: 16px;
        font-size: 20px;
    }

    .fade-bar {
        width: min(559px, 100%);
        height: 11px;
        margin-bottom: 24px;
    }

    .fade-verse {
        min-height: 128px;
        gap: 12px;
        padding: 27px 32px;
        border-width: 3px;
        border-radius: 27px;
    }

    .fade-word { font-size: 23px; }

    .fade-slot {
        min-width: 72px;
        border-bottom-width: 3px;
        font-size: 23px;
    }

    /* --- Ігри Буття 4 (четвер) --- */
    .ws-grid {
        width: min(585px, 100%);
        gap: 5px;
        padding: 19px;
        border-radius: 27px;
        margin-bottom: 24px;
    }

    .ws-cell {
        border-radius: 11px;
        font-size: 20px;
    }

    .ws-words {
        gap: 11px 19px;
        margin-bottom: 21px;
    }

    .ws-word { font-size: 19px; }

    .pair-board {
        grid-template-columns: 253px minmax(0, 1fr);
        gap: 19px;
    }

    .pair-btn {
        padding: 17px 21px;
        border-width: 3px;
        border-radius: 21px;
        font-size: 20px;
    }

    .tree {
        gap: 8px;
        margin-bottom: 27px;
    }

    .tree-name,
    .tree-slot {
        min-width: 200px;
        padding: 15px 27px;
        border-radius: 21px;
        font-size: 23px;
    }

    .tree-slot { border-width: 3px; }

    .tree-arrow { font-size: 20px; }

    /* --- Ігри Буття 5 (п'ятниця) --- */
    .gen-bar { width: min(559px, 100%); height: 11px; margin-bottom: 21px; }

    .tree--compact { width: min(399px, 100%); gap: 4px; margin-bottom: 21px; }
    .tree--compact .tree-name,
    .tree--compact .tree-slot { padding: 11px 24px; font-size: 21px; }
    .tree--compact .tree-arrow { font-size: 17px; }
    .tree-years { font-size: 16px; }

    .guess-box {
        width: min(612px, 100%);
        padding: 29px 32px 21px;
        border-radius: 27px;
        margin-bottom: 27px;
    }
    .guess-value { margin-bottom: 16px; font-size: 45px; }
    .guess-scale { margin-top: 8px; font-size: 16px; }

    .calc-screen {
        width: min(346px, 100%);
        padding: 19px 27px;
        border-radius: 21px;
        margin-bottom: 21px;
        font-size: 40px;
    }
    .calc-pad { grid-template-columns: repeat(3, 98px); gap: 13px; }
    .calc-key { height: 77px; border-width: 3px; border-radius: 21px; font-size: 27px; }

    /* --- Ігри Буття 6 (субота) --- */
    .ark-hold {
        gap: 11px;
        min-height: 128px;
        padding: 16px;
        border-radius: 27px 27px 11px 11px;
        margin-bottom: 16px;
    }
    .ark-tally { gap: 11px; margin-bottom: 21px; }
    .tally { padding: 7px 15px; border-width: 3px; border-radius: 16px; font-size: 17px; }
    .ark-yard { gap: 11px; min-height: 93px; }
    .beast { width: 72px; height: 72px; border-width: 3px; border-radius: 21px; font-size: 35px; }

    .ark-view {
        width: min(612px, 100%);
        height: 253px;
        padding: 19px;
        border-radius: 27px;
    }
    .ark-size { margin: 16px 0 21px; font-size: 20px; }
    .ark-dims { gap: 13px; width: min(479px, 100%); }
    .dim {
        grid-template-columns: 112px 56px 1fr 56px 29px;
        gap: 11px;
        padding: 11px 16px;
        border-width: 3px;
        border-radius: 21px;
    }
    .dim__label { font-size: 19px; }
    .dim__btn { height: 45px; border-radius: 13px; font-size: 24px; }
    .dim__value { font-size: 29px; }
    .dim__mark { font-size: 21px; }

    .slip-line { gap: 9px; padding: 29px 32px; border-width: 3px; border-radius: 27px; }
    .slip-word { padding: 7px 12px; border-radius: 13px; font-size: 23px; }

    /* --- Ігри Буття 7 (неділя) --- */
    .crew-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 13px; }
    .crew-card { gap: 8px; padding: 19px 11px; border-width: 3px; border-radius: 24px; }
    .crew-card__icon { font-size: 35px; }
    .crew-card__name { font-size: 17px; }

    .flood { width: min(612px, 100%); height: 173px; border-radius: 24px; margin-bottom: 24px; }
    .flood__ark { font-size: 43px; }
    .flood-opts { gap: 13px; width: min(612px, 100%); }
    .flood-opt { padding: 17px 24px; border-width: 3px; border-radius: 21px; font-size: 20px; }

    .nums-bank { gap: 13px; margin-bottom: 24px; min-height: 64px; }
    .nums-chip { min-width: 82px; padding: 12px 19px; border-width: 3px; border-radius: 19px; font-size: 29px; }
    .nums-list { gap: 13px; }
    .nums-line { padding: 17px 24px; border-width: 3px; border-radius: 21px; font-size: 20px; }
    .nums-line__ref { margin-left: 11px; font-size: 16px; }
    .nums-slot { min-width: 69px; padding: 3px 11px; border-bottom-width: 3px; font-size: 25px; }

    /* --- Повторення тижня (неділя) --- */
    .game--wide { width: min(958px, 94vw); }

    .wk { width: 333px; height: 333px; margin: 5px 0 19px; }
    .wk__petal { width: 61px; height: 128px; margin-left: -31px; }
    .wk__label { top: 16px; font-size: 16px; }
    .wk__center { width: 122px; height: 122px; margin: -61px 0 0 -61px; }
    .wk__center b { font-size: 35px; }
    .wk__center span { font-size: 15px; }
    .wk-note { margin-bottom: 27px; font-size: 17px; }

    .rev-modes { gap: 19px; }
    .rev-mode { min-width: 253px; padding: 21px 29px; border-width: 3px; border-radius: 27px; }
    .rev-mode b { font-size: 23px; }
    .rev-mode span { font-size: 17px; }

    .rev-bar { width: min(612px, 100%); height: 11px; margin-bottom: 24px; }
    .rev-card { padding-top: 45px; }
    .rev-chapter { top: 16px; padding: 5px 16px; border-radius: 16px; font-size: 16px; }
    .rev-answer { gap: 13px; width: min(612px, 100%); }
    .rev-opt { padding: 17px 24px; border-width: 3px; border-radius: 21px; font-size: 20px; }
    .rev-input { gap: 13px; }
    .rev-input__field { padding: 17px 24px; border-width: 3px; border-radius: 21px; font-size: 21px; }

    .rev-report { gap: 11px; width: min(559px, 100%); }
    .rev-row { gap: 16px; padding: 15px 21px; border-width: 3px; border-radius: 19px; }
    .rev-row b { font-size: 20px; }
    .rev-row span { font-size: 19px; }
    .rev-row i { font-size: 16px; }

    /* --- Сторінка входу (login.php) — ×1.33 --- */
    .auth-card {
        width: min(878px, 94vw);
        min-height: 967px;
        padding: 49px 59px 64px;
        border-radius: 201px;
    }

    .auth-card__logo {
        height: 114px;
        margin-bottom: 32px;
    }

    .auth-card__title {
        font-size: 45px;
        margin-bottom: 56px;
    }

    .auth-form {
        width: 497px;
        gap: 23px;
    }

    .auth-field + .auth-field { margin-top: 23px; }

    .auth-field__icon {
        left: 29px;
        width: 32px;
        height: 32px;
    }

    .auth-field__input {
        height: 108px;
        padding: 0 32px 0 82px;
        border-radius: 53px;
        border-width: 2px;
        font-size: 23px;
    }

    .auth-row {
        padding: 0 8px;
        margin-top: 23px;
        margin-bottom: 23px;
    }

    .auth-remember { gap: 12px; font-size: 19px; }

    .auth-remember__box {
        width: 29px;
        height: 29px;
        border-radius: 7px;
        font-size: 17px;
    }

    .auth-forgot { font-size: 19px; }

    .auth-submit {
        height: 108px;
        margin-top: 9px;
        border-radius: 53px;
        font-size: 23px;
    }

    .auth-alt {
        margin-top: 56px;
        font-size: 24px;
    }

    .auth-alt__link { margin-left: 8px; }

    .auth-card__cross {
        bottom: -44px;
        width: 53px;
    }

    /* реєстрація: між полями звичайний крок, подвоєний — лише перед кнопкою */
    .auth-card--register .auth-field + .auth-field { margin-top: 0; }

    .auth-card--register .auth-submit { margin-top: 23px; }

    .auth-gender {
        gap: 48px;
        margin-top: -22px;
        margin-bottom: 11px;
    }

    .auth-gender__label { font-size: 23px; }
    .auth-gender__opt { gap: 13px; }
    .auth-gender__dot { width: 26px; height: 26px; border-width: 2px; }
    .auth-gender__dot::after { inset: 6px; }
    .auth-gender__text { font-size: 20px; }

    /* --- Сторінка статусів + стрічка правил — ×1.33 --- */
    .ticker { padding: 23px 0; }
    .ticker__item { font-size: 17px; }

    .statuses {
        width: min(1112px, 94vw);
        gap: 61px;
    }

    .status-table {
        --label-w: 200px;
        padding-top: 35px;
    }

    .status-table__head {
        top: -21px;
        right: 35px;
        border-radius: 24px;
        box-shadow: 0 8px 0 0 #389238;
        padding: 29px 8px 27px;
    }

    .status-table__col { gap: 5px; }
    .status-table__name { font-size: 20px; }
    .status-table__stars { gap: 4px; }
    .status-table__stars img { width: 16px; height: 16px; }

    .status-table__card {
        border-radius: 32px;
        box-shadow: 0 11px 0 0 #F0F0F0;
        padding: 32px 35px 8px 0;
    }

    .status-table__row { min-height: 80px; }

    .status-table__label {
        font-size: 21px;
        padding-left: 45px;
    }

    .status-table__cell { min-height: 80px; font-size: 17px; }
    .status-table__cell--yes { font-size: 23px; }
    .status-table__cell--no  { font-size: 20px; }
    .status-table__cell--cam { font-size: 24px; }

    /* --- Зірочки в прогрес-барі --- */
    .progress__star { width: 19px; height: 19px; }


    .thanks { gap: 40px; }
    .thanks__tab { width: 58px; height: 166px; border-radius: 0 40px 40px 0; padding-left: 29px; }
    .thanks__balloon { width: 74px; height: 74px; }
    .thanks__text { font-size: 21px; }

    /* --- Налаштування (settings.php) — ×1.33 --- */
    .account { width: 745px; margin-top: 35px; }
    .account__card { padding: 35px 53px; border-radius: 37px; box-shadow: 0 11px 0 0 #F0F0F0; }
    .account__avatar { width: 72px; height: 72px; }
    .account__user { gap: 24px; }
    .account__name { font-size: 25px; }
    .account__level { font-size: 17px; }
    .account__divider { margin: 21px 0 24px; }
    .account__subtitle { font-size: 19px; margin: 21px 0 13px; }

    .settings-field { gap: 8px; margin-bottom: 19px; }
    .settings-field__label { font-size: 19px; }

    .settings-input {
        padding: 15px 24px;
        border-width: 3px;
        border-radius: 19px;
        font-size: 20px;
    }

    .settings-row { gap: 21px; }
    .btn-green--full { margin-top: 13px; padding: 21px 0; font-size: 19px; }
    .settings-msg { margin-top: 19px; font-size: 19px; }


    /* --- Преміум (premium.php) — ×1.33 --- */
    .main--premium { padding-top: 80px; }
    .premium { max-width: 1383px; }
    .premium__title { font-size: 33px; }
    .premium__subtitle { margin-top: 11px; font-size: 17px; }

    .plan {
        width: 388px;
        min-height: 447px;
        border-radius: 69px;
        padding: 40px 43px 109px;
    }

    .plan--mid {
        width: 402px;
        min-height: 529px;
        margin: 0 -19px;
    }

    .plan--year { min-height: 487px; }

    .plan__name { font-size: 28px; }
    .plan__note { margin-top: 8px; font-size: 17px; }
    .plan__price { gap: 13px; margin: 16px 0 24px; }
    .plan__amount { font-size: 74px; }
    .plan--mid .plan__amount { font-size: 98px; }
    .plan__unit { font-size: 19px; }

    .plan__features { gap: 20px; }
    .plan__features li { padding-left: 40px; font-size: 19px; }
    .plan__features li::before { font-size: 21px; }

    .plan__btn {
        left: 24px;
        right: 24px;
        bottom: -29px;
        height: 101px;
        border-radius: 53px;
        font-size: 20px;
    }

    .premium-cta {
        height: 72px;
        border-radius: 53px 53px 0 0;
        font-size: 23px;
    }
}

/* ===================== АДАПТИВ — 4K (3840×2160 на 100% масштабі) ===================== */
/* 3840 = рівно 2×1920, тому всі значення бази просто подвоєні —
   верстка виглядає піксель-у-піксель як на 1920, тільки вдвічі більша.
   Поріг 3800px — щоб зловити вікно майже на весь екран. */
@media (min-width: 3800px) {

    /* --- Хедер --- */
    .header__inner {
        padding: 60px 110px;
        gap: 40px;
    }

    .btn-report {
        height: 126px;
        padding: 0 62px;
        gap: 26px;
        font-size: 32px;
        border-radius: 80px;
        box-shadow: 0 8px 0 0 #389238;
    }

    .btn-report__icon {
        width: 52px;
        height: 52px;
        margin-left: 6px;
    }

    .logo__img {
        height: 176px;
    }

    .header__right {
        gap: 50px;
    }

    .icon-btn {
        width: 126px;
        height: 126px;
        border-width: 6px;
    }

    .icon-btn__img {
        width: 50px;
        height: 50px;
    }

    #searchOpen .icon-btn__img {
        width: 46px;
        height: 46px;
    }

    .icon-btn__badge {
        right: -16px;
        bottom: -16px;
        width: 60px;
        height: 60px;
        border-width: 6px;
        font-size: 26px;
    }

    .profile__avatar {
        width: 200px;
        height: 200px;
        margin-top: -40px;
    }

    .profile__chevron svg {
        width: 36px;
        height: 20px;
    }

    /* Дропдаун сповіщень */
    .notif__dropdown {
        top: calc(100% + 32px);
        right: -120px;
        min-width: 420px;
        border-radius: 28px;
        padding: 40px 52px;
        font-size: 30px;
    }

    /* Меню профілю (при наведенні) */
    .profile-menu {
        min-width: 360px;
        border-radius: 24px;
        padding: 28px 0;
    }

    .profile-menu__name {
        font-size: 30px;
        padding: 0 40px 24px;
    }

    .profile-menu__list {
        padding-top: 16px;
    }

    .profile-menu__link {
        font-size: 30px;
        padding: 20px 40px;
    }

    /* Вікно пошуку */
    .search-overlay {
        padding-top: 240px;
    }

    .search-box {
        max-width: 940px;
        height: 124px;
        border-radius: 32px;
        gap: 24px;
        padding: 0 40px;
    }

    .search-box__input {
        font-size: 34px;
    }

    .search-box__close svg {
        width: 40px;
        height: 40px;
    }

    /* --- Ромашка --- */
    .daisy {
        max-width: 1320px;     /* 2× від бази 660 */
    }

    /* --- Панель "Ігри" справа --- */
    .games {
        gap: 28px;
    }

    .games__lock {
        width: 36px;
        height: 36px;
    }

    .games__text {
        font-size: 32px;
    }

    .games__tab {
        width: 88px;
        height: 250px;
        border-width: 6px;
        border-radius: 60px 0 0 60px;
    }

    .games__diamond {
        width: 68px;
        height: 68px;
    }

    /* --- Прогрес-бар унизу --- */
    .progress {
        --track-h: 48px;
        --fill-h: 78px;
        --pad: 60px;
        --up: 36px;
    }

    .progress__fill { min-width: 120px; }

    .progress__label,
    .progress__next {
        font-size: 36px;
    }


    .progress__xp-now { font-size: 32px; }
    .progress__xp-max { font-size: 24px; }

    .progress__arrow {
        top: -80px;
    }

    .progress__arrow svg {
        width: 66px;
        height: 56px;
    }

    /* --- Модалка "Дати звіт" --- */
    .report {
        max-width: 1600px;
        --gate-band: 92px;
        --gate-grow: 92px;
        --note-thick: 20px;
        height: calc(1320px + var(--gate-extra));
        border-radius: 56px;
        padding: 112px 92px 92px;
        padding-bottom: calc(var(--gate-band) + var(--gate-extra));
    }

    .report__header {
        top: -64px;
        width: 1368px;
        height: 176px;
        border-radius: 48px;
        box-shadow: 0 20px 0 0 #389238;
        padding: 0 56px;
    }

    .report__header-left {
        gap: 28px;
        font-size: 32px;
    }

    .report__header-icon {
        width: 52px;
        height: 52px;
    }

    .report__day {
        gap: 16px;
        font-size: 30px;
    }

    .report__day svg {
        width: 32px;
        height: 32px;
    }

    .report__checks {
        width: 1376px;
        column-gap: 40px;
        padding: 0 44px;
    }

    .check__box {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        margin-right: -28px;
    }

    .check__box img {
        width: 32px;
        height: 32px;
    }

    .check__pill {
        gap: 28px;
        height: 140px;
        max-width: 500px;
        padding: 0 44px 0 66px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
    }

    .check__icon {
        width: 50px;
        height: 50px;
    }

    .check__text {
        font-size: 33px;
    }

    .check__note { right: 40px; bottom: -32px; font-size: 20px; }

    .report__note {
        width: 1376px;
        height: 360px;
        border-radius: 44px;
        box-shadow: 0 20px 0 0 #389238;
        padding: 40px 44px 28px;
    }

    .report__textarea {
        font-size: 32px;
    }

    .report__note-right {
        gap: 28px;
    }

    .report__tool img {
        width: 48px;
        height: 48px;
    }

    .report__send {
        width: 88px;
        height: 88px;
        border-radius: 24px;
    }

    .report__send img {
        width: 44px;
        height: 44px;
    }

    /* Панель емодзі */
    .emoji-picker {
        bottom: 128px;
        right: 28px;
        width: 640px;
        max-height: 440px;
        border-radius: 32px;
        padding: 24px;
    }

    .emoji-picker button {
        font-size: 44px;
        padding: 10px;
    }

    /* --- Сторінка дня (day.php) — все ×2 від бази --- */
    .day-pill {
        width: 936px;                      /* 468 × 2 */
        height: 136px;
        border-radius: 0 0 160px 160px;
        box-shadow: 0 12px 0 0 #389238;
        font-size: 30px;
        letter-spacing: 2px;
    }

    .tasks {
        grid-template-columns: repeat(2, 740px);   /* 370 × 2 */
        gap: 24px;
    }

    .task-card {
        height: 228px;
        padding: 0 104px;
        gap: 44px;
        box-shadow: 0 16px 0 0 #F0F0F0;
    }

    .tasks .task-card:nth-child(1) { border-radius: 160px 0 0 0; }
    .tasks .task-card:nth-child(2) { border-radius: 0 160px 0 0; }
    .tasks .task-card:nth-child(5) { border-radius: 0 0 0 160px; }
    .tasks .task-card:nth-child(6) { border-radius: 0 0 160px 0; }

    .task-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 24px 0 0 #F0F0F0;
    }

    .task-card__icon {
        font-size: 76px;
    }

    .task-card__icon-img { --task-icon: 88px; }

    .task-card__text {
        font-size: 40px;
    }

    /* --- Сторінка "Хліб" (bread.php) — все ×2 від бази --- */
    .bread {
        width: min(1760px, 100%);          /* 880 × 2 */
        gap: 40px;
    }

    .bread-note {
        font-size: 32px;
        max-width: 1280px;
    }

    .player {
        width: min(1760px, 100%);
        border-radius: 56px;
    }

    .player__big {
        width: 184px;
        height: 184px;
        box-shadow: 0 10px 0 0 #389238, 0 24px 68px rgba(0, 0, 0, 0.35);
    }

    .player__big svg {
        width: 68px;
        height: 68px;
    }

    .player__controls {
        left: 28px;
        right: 28px;
        bottom: 28px;
        padding: 24px 32px 20px;
        border-radius: 40px;
        gap: 20px;
    }

    .player__progress {
        height: 16px;
        border-radius: 16px;
    }

    .player__progress:hover {
        height: 22px;
    }

    .player__progress-knob {
        right: -16px;
        width: 32px;
        height: 32px;
        border-width: 6px;
    }

    .player__btn {
        width: 80px;
        height: 80px;
    }

    .player__btn svg {
        width: 44px;
        height: 44px;
    }

    .player__time {
        margin-left: 12px;
        font-size: 26px;
    }

    .player__speed {
        padding: 0 24px;
        border-radius: 40px;
        font-size: 28px;
    }

    .player__volume {
        width: 168px;
        height: 12px;
    }

    .player__volume::-webkit-slider-thumb {
        width: 30px;
        height: 30px;
        border-width: 6px;
    }

    .player__volume::-moz-range-thumb {
        width: 30px;
        height: 30px;
        border-width: 6px;
    }

    /* --- Сторінка вдячності (gratitude.php) — все ×2 від бази --- */
    .gratitude-hint {
        margin-top: 36px;
        font-size: 30px;
    }

    .balloon {
        width: 340px;                      /* 170 × 2 */
    }

    .balloon__body {
        height: 400px;
        padding: 40px 44px;
    }

    .balloon__text {
        font-size: 34px;
    }

    .balloon__knot {
        width: 32px;
        height: 24px;
        margin-top: -8px;
    }

    .balloon__string {
        width: 40px;
        height: 140px;
    }

    .gratitude-edit {
        width: 128px;
        height: 128px;
        bottom: 36px;
        box-shadow: 0 8px 0 0 #389238;
    }

    .gratitude-edit svg {
        width: 52px;
        height: 52px;
    }

    .thanks-modal {
        max-width: 1040px;
        border-radius: 56px;
        padding: 116px 68px 60px;
    }

    .thanks-modal__header {
        top: -52px;
        width: 800px;
        height: 128px;
        border-radius: 40px;
        box-shadow: 0 14px 0 0 #389238;
        gap: 28px;
        font-size: 32px;
    }

    .thanks-modal__close {
        right: 32px;
        width: 64px;
        height: 64px;
        font-size: 28px;
    }

    .thanks-tabs {
        gap: 16px;
        margin-bottom: 32px;
        padding-bottom: 32px;
    }

    .thanks-tab {
        gap: 16px;
        padding: 16px 32px;
        border-radius: 60px;
        border-width: 4px;
        font-size: 26px;
    }

    .thanks-tab__btn {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .thanks-tab__input {
        width: 240px;
        font-size: 26px;
    }

    .thanks-tab--add {
        font-size: 32px;
        padding: 16px 28px;
    }

    .thanks-count {
        gap: 28px;
        margin-bottom: 36px;
        padding-bottom: 36px;
    }

    .thanks-count__label {
        font-size: 28px;
    }

    .thanks-count__range {
        height: 16px;
        border-radius: 16px;
    }

    .thanks-count__range::-webkit-slider-thumb {
        width: 48px;
        height: 48px;
        border-width: 6px;
    }

    .thanks-count__range::-moz-range-thumb {
        width: 48px;
        height: 48px;
        border-width: 6px;
    }

    .thanks-count__value {
        width: 68px;
        height: 68px;
        font-size: 30px;
        box-shadow: 0 6px 0 0 #389238;
    }

    .thanks-list {
        max-height: 600px;
        gap: 16px;
    }

    .thanks-list__item {
        gap: 16px;
    }

    .thanks-list__input {
        padding: 22px 32px;
        border-radius: 24px;
        font-size: 30px;
    }

    .thanks-list__del {
        width: 60px;
        height: 60px;
        font-size: 26px;
    }

    .thanks-list__empty {
        padding: 44px 0;
        font-size: 28px;
    }

    .thanks-add {
        gap: 20px;
        margin-top: 36px;
        padding-top: 36px;
    }

    .thanks-add__input {
        padding: 24px 36px;
        border-radius: 60px;
        border-width: 4px;
        font-size: 30px;
    }

    .thanks-add__btn {
        padding: 0 52px;
        border-radius: 60px;
        font-size: 28px;
        box-shadow: 0 8px 0 0 #389238;
    }

    /* --- Сторінка ігор (games.php): хаб вибору гри — ×2.
       Самі ігри всередині поки не адаптовані. --- */
    .ghub {
        gap: 56px;
    }

    .gcard {
        width: 600px;
        min-height: 600px;
        border-radius: 48px;
        border-left-width: 10px;
        padding: 60px 56px 112px;
    }

    .gcard__num {
        font-size: 68px;
        letter-spacing: 6px;
        margin-bottom: 28px;
    }

    .gcard__title {
        font-size: 36px;
        margin-bottom: 24px;
    }

    .gcard__desc {
        font-size: 28px;
        margin-bottom: 40px;
    }

    .gcard__tag {
        padding: 14px 28px;
        border-radius: 28px;
        font-size: 24px;
    }

    .gcard__arrow {
        right: 48px;
        bottom: 36px;
        font-size: 40px;
    }

    /* --- Екрани самих ігор — все ×2 від бази --- */
    .game {
        width: min(1360px, 94vw);
    }

    .game__head {
        margin-bottom: 16px;
        min-height: 80px;
    }

    .game__back {
        padding: 18px 36px;
        border-width: 4px;
        border-radius: 60px;
        font-size: 26px;
    }

    .game__title {
        font-size: 40px;
    }

    .game__hint,
    .game__progress {
        font-size: 28px;
        margin-bottom: 32px;
    }

    .game__actions {
        gap: 32px;
        margin-top: 36px;
    }

    .game__shuffle {
        font-size: 28px;
    }

    .game__result {
        margin-top: 28px;
        font-size: 30px;
        min-height: 40px;
    }

    .game__over {
        gap: 40px;
        padding: 60px 0 20px;
    }

    .game__score {
        font-size: 44px;
    }

    .games-main .btn-green,
    .gmodal .btn-green {
        padding: 28px 68px;
        border-radius: 60px;
        font-size: 28px;
        box-shadow: 0 8px 0 0 #389238;
    }

    .order-list {
        gap: 20px;
    }

    .order-item {
        gap: 28px;
        border-radius: 32px;
        border-left-width: 10px;
        padding: 26px 36px;
    }

    .order-item__grip { font-size: 30px; }
    .order-item__icon { font-size: 44px; }
    .order-item__text { font-size: 30px; }

    .tf-card {
        min-height: 260px;
        border-radius: 44px;
        padding: 52px 68px;
        margin-bottom: 44px;
    }

    .tf-card__text {
        font-size: 38px;
    }

    .tf-btns {
        gap: 36px;
    }

    .tf-btn {
        padding: 32px 68px;
        border-radius: 60px;
        font-size: 32px;
    }

    .tf-btn--yes { box-shadow: 0 8px 0 0 #389238; }
    .tf-btn--no  { box-shadow: 0 8px 0 0 #B84730; }
    .tf-btn--yes:hover { box-shadow: 0 12px 0 0 #389238; }
    .tf-btn--no:hover  { box-shadow: 0 12px 0 0 #B84730; }

    .dayq-days {
        gap: 24px;
    }

    .dayq-btn {
        width: 104px;
        height: 104px;
        border-width: 4px;
        font-size: 36px;
    }

    .gmodal__box {
        width: min(800px, calc(100vw - 40px));
        padding: 60px 56px 52px;
        border-radius: 48px;
    }

    .gmodal__icon {
        font-size: 76px;
        margin-bottom: 24px;
    }

    .gmodal__title {
        font-size: 38px;
        margin-bottom: 20px;
    }

    .gmodal__text {
        font-size: 30px;
        margin-bottom: 44px;
    }

    /* --- Ігри Буття 2 (вівторок) --- */
    .eden-stats { gap: 44px; margin-bottom: 28px; }
    .eden-stat  { font-size: 32px; }

    .eden-field {
        width: min(1240px, 92vw);
        height: 720px;
        border-radius: 48px;
    }

    .eden-fruit {
        width: 116px;
        height: 116px;
        font-size: 56px;
    }

    .mem-grid { gap: 28px; }

    .mem-card__face {
        padding: 24px;
        border-radius: 36px;
        font-size: 26px;
    }

    .mem-card__face--back { font-size: 52px; }
    .mem-card--name .mem-card__face--front { font-size: 34px; }

    .verse-line {
        min-height: 184px;
        gap: 16px;
        padding: 36px 44px;
        border-radius: 40px;
        border-width: 4px;
    }

    .verse-word { font-size: 34px; }

    .verse-ref {
        margin: 20px 0 32px;
        font-size: 26px;
    }

    .verse-bank { gap: 20px; }

    .verse-chip {
        padding: 20px 32px;
        border-width: 4px;
        border-radius: 60px;
        font-size: 30px;
    }

    /* --- Ігри Буття 3 (середа) --- */
    .who-btns {
        width: min(920px, 100%);
        gap: 24px;
    }

    .who-btn {
        padding: 30px 20px;
        border-width: 4px;
        border-radius: 40px;
        font-size: 30px;
    }

    .sort-pool {
        gap: 20px;
        min-height: 108px;
        padding: 24px;
        border-width: 4px;
        border-radius: 36px;
        margin-bottom: 36px;
    }

    .sort-card {
        max-width: 520px;
        padding: 20px 30px;
        border-width: 4px;
        border-radius: 32px;
        font-size: 28px;
    }

    .sort-zones { gap: 28px; }

    .sort-zone {
        min-height: 300px;
        padding: 28px 24px;
        border-radius: 40px;
    }

    .sort-zone__title {
        margin-bottom: 24px;
        font-size: 30px;
    }

    .fade-bar {
        width: min(840px, 100%);
        height: 16px;
        margin-bottom: 36px;
    }

    .fade-verse {
        min-height: 192px;
        gap: 18px;
        padding: 40px 48px;
        border-width: 4px;
        border-radius: 40px;
    }

    .fade-word { font-size: 34px; }

    .fade-slot {
        min-width: 108px;
        border-bottom-width: 4px;
        font-size: 34px;
    }

    /* --- Ігри Буття 4 (четвер) --- */
    .ws-grid {
        width: min(880px, 100%);
        gap: 8px;
        padding: 28px;
        border-radius: 40px;
        margin-bottom: 36px;
    }

    .ws-cell {
        border-radius: 16px;
        font-size: 30px;
    }

    .ws-words {
        gap: 16px 28px;
        margin-bottom: 32px;
    }

    .ws-word { font-size: 28px; }

    .pair-board {
        grid-template-columns: 380px minmax(0, 1fr);
        gap: 28px;
    }

    .pair-btn {
        padding: 26px 32px;
        border-width: 4px;
        border-radius: 32px;
        font-size: 30px;
    }

    .tree {
        gap: 12px;
        margin-bottom: 40px;
    }

    .tree-name,
    .tree-slot {
        min-width: 300px;
        padding: 22px 40px;
        border-radius: 32px;
        font-size: 34px;
    }

    .tree-slot { border-width: 4px; }

    .tree-arrow { font-size: 30px; }

    /* --- Ігри Буття 5 (п'ятниця) --- */
    .gen-bar { width: min(840px, 100%); height: 16px; margin-bottom: 32px; }

    .tree--compact { width: min(600px, 100%); gap: 6px; margin-bottom: 32px; }
    .tree--compact .tree-name,
    .tree--compact .tree-slot { padding: 16px 36px; font-size: 32px; }
    .tree--compact .tree-arrow { font-size: 26px; }
    .tree-years { font-size: 24px; }

    .guess-box {
        width: min(920px, 100%);
        padding: 44px 48px 32px;
        border-radius: 40px;
        margin-bottom: 40px;
    }
    .guess-value { margin-bottom: 24px; font-size: 68px; }
    .guess-scale { margin-top: 12px; font-size: 24px; }

    .calc-screen {
        width: min(520px, 100%);
        padding: 28px 40px;
        border-radius: 32px;
        margin-bottom: 32px;
        font-size: 60px;
    }
    .calc-pad { grid-template-columns: repeat(3, 148px); gap: 20px; }
    .calc-key { height: 116px; border-width: 4px; border-radius: 32px; font-size: 40px; }

    /* --- Ігри Буття 6 (субота) --- */
    .ark-hold {
        gap: 16px;
        min-height: 192px;
        padding: 24px;
        border-radius: 40px 40px 16px 16px;
        margin-bottom: 24px;
    }
    .ark-tally { gap: 16px; margin-bottom: 32px; }
    .tally { padding: 10px 22px; border-width: 4px; border-radius: 24px; font-size: 26px; }
    .ark-yard { gap: 16px; min-height: 140px; }
    .beast { width: 108px; height: 108px; border-width: 4px; border-radius: 32px; font-size: 52px; }

    .ark-view {
        width: min(920px, 100%);
        height: 380px;
        padding: 28px;
        border-radius: 40px;
    }
    .ark-size { margin: 24px 0 32px; font-size: 30px; }
    .ark-dims { gap: 20px; width: min(720px, 100%); }
    .dim {
        grid-template-columns: 168px 84px 1fr 84px 44px;
        gap: 16px;
        padding: 16px 24px;
        border-width: 4px;
        border-radius: 32px;
    }
    .dim__label { font-size: 28px; }
    .dim__btn { height: 68px; border-radius: 20px; font-size: 36px; }
    .dim__value { font-size: 44px; }
    .dim__mark { font-size: 32px; }

    .slip-line { gap: 14px; padding: 44px 48px; border-width: 4px; border-radius: 40px; }
    .slip-word { padding: 10px 18px; border-radius: 20px; font-size: 34px; }

    /* --- Ігри Буття 7 (неділя) --- */
    .crew-grid { grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 20px; }
    .crew-card { gap: 12px; padding: 28px 16px; border-width: 4px; border-radius: 36px; }
    .crew-card__icon { font-size: 52px; }
    .crew-card__name { font-size: 26px; }

    .flood { width: min(920px, 100%); height: 260px; border-radius: 36px; margin-bottom: 36px; }
    .flood__ark { font-size: 64px; }
    .flood-opts { gap: 20px; width: min(920px, 100%); }
    .flood-opt { padding: 26px 36px; border-width: 4px; border-radius: 32px; font-size: 30px; }

    .nums-bank { gap: 20px; margin-bottom: 36px; min-height: 96px; }
    .nums-chip { min-width: 124px; padding: 18px 28px; border-width: 4px; border-radius: 28px; font-size: 44px; }
    .nums-list { gap: 20px; }
    .nums-line { padding: 26px 36px; border-width: 4px; border-radius: 32px; font-size: 30px; }
    .nums-line__ref { margin-left: 16px; font-size: 24px; }
    .nums-slot { min-width: 104px; padding: 4px 16px; border-bottom-width: 4px; font-size: 38px; }

    /* --- Повторення тижня (неділя) --- */
    .game--wide { width: min(1440px, 94vw); }

    .wk { width: 500px; height: 500px; margin: 8px 0 28px; }
    .wk__petal { width: 92px; height: 192px; margin-left: -46px; }
    .wk__label { top: 24px; font-size: 24px; }
    .wk__center { width: 184px; height: 184px; margin: -92px 0 0 -92px; }
    .wk__center b { font-size: 52px; }
    .wk__center span { font-size: 22px; }
    .wk-note { margin-bottom: 40px; font-size: 26px; }

    .rev-modes { gap: 28px; }
    .rev-mode { min-width: 380px; padding: 32px 44px; border-width: 4px; border-radius: 40px; }
    .rev-mode b { font-size: 34px; }
    .rev-mode span { font-size: 26px; }

    .rev-bar { width: min(920px, 100%); height: 16px; margin-bottom: 36px; }
    .rev-card { padding-top: 68px; }
    .rev-chapter { top: 24px; padding: 8px 24px; border-radius: 24px; font-size: 24px; }
    .rev-answer { gap: 20px; width: min(920px, 100%); }
    .rev-opt { padding: 26px 36px; border-width: 4px; border-radius: 32px; font-size: 30px; }
    .rev-input { gap: 20px; }
    .rev-input__field { padding: 26px 36px; border-width: 4px; border-radius: 32px; font-size: 32px; }

    .rev-report { gap: 16px; width: min(840px, 100%); }
    .rev-row { gap: 24px; padding: 22px 32px; border-width: 4px; border-radius: 28px; }
    .rev-row b { font-size: 30px; }
    .rev-row span { font-size: 28px; }
    .rev-row i { font-size: 24px; }

    /* --- Сторінка входу (login.php) — все ×2 від бази --- */
    .auth-card {
        width: min(1320px, 94vw);
        min-height: 1454px;
        padding: 74px 88px 96px;
        border-radius: 302px;
    }

    .auth-card__logo {
        height: 172px;
        margin-bottom: 48px;
    }

    .auth-card__title {
        font-size: 68px;
        margin-bottom: 84px;
    }

    .auth-form {
        width: 748px;
        gap: 34px;
    }

    .auth-field + .auth-field { margin-top: 34px; }

    .auth-field__icon {
        left: 44px;
        width: 48px;
        height: 48px;
    }

    .auth-field__input {
        height: 162px;
        padding: 0 48px 0 124px;
        border-radius: 80px;
        border-width: 3px;
        font-size: 34px;
    }

    .auth-row {
        padding: 0 12px;
        margin-top: 34px;
        margin-bottom: 34px;
    }

    .auth-remember { gap: 18px; font-size: 28px; }

    .auth-remember__box {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        font-size: 26px;
    }

    .auth-forgot { font-size: 28px; }

    .auth-submit {
        height: 162px;
        margin-top: 14px;
        border-radius: 80px;
        font-size: 34px;
    }

    .auth-alt {
        margin-top: 84px;
        font-size: 36px;
    }

    .auth-alt__link { margin-left: 12px; }

    .auth-card__cross {
        bottom: -66px;
        width: 80px;
    }

    /* реєстрація: між полями звичайний крок, подвоєний — лише перед кнопкою */
    .auth-card--register .auth-field + .auth-field { margin-top: 0; }

    .auth-card--register .auth-submit { margin-top: 34px; }

    .auth-gender {
        gap: 72px;
        margin-top: -32px;
        margin-bottom: 18px;
    }

    .auth-gender__label { font-size: 34px; }
    .auth-gender__opt { gap: 20px; }
    .auth-gender__dot { width: 40px; height: 40px; border-width: 3px; }
    .auth-gender__dot::after { inset: 9px; }
    .auth-gender__text { font-size: 30px; }

    /* --- Сторінка статусів + стрічка правил — все ×2 від бази --- */
    .ticker { padding: 34px 0; }
    .ticker__item { font-size: 26px; }

    .statuses {
        width: min(1672px, 94vw);
        gap: 92px;
    }

    .status-table {
        --label-w: 300px;
        padding-top: 52px;
    }

    .status-table__head {
        top: -32px;
        right: 52px;
        border-radius: 36px;
        box-shadow: 0 12px 0 0 #389238;
        padding: 44px 12px 40px;
    }

    .status-table__col { gap: 8px; }
    .status-table__name { font-size: 30px; }
    .status-table__stars { gap: 6px; }
    .status-table__stars img { width: 24px; height: 24px; }

    .status-table__card {
        border-radius: 48px;
        box-shadow: 0 16px 0 0 #F0F0F0;
        padding: 48px 52px 12px 0;
    }

    .status-table__row { min-height: 120px; }

    .status-table__label {
        font-size: 32px;
        padding-left: 68px;
    }

    .status-table__cell { min-height: 120px; font-size: 26px; }
    .status-table__cell--yes { font-size: 34px; }
    .status-table__cell--no  { font-size: 30px; }
    .status-table__cell--cam { font-size: 36px; }

    /* --- Зірочки в прогрес-барі --- */
    .progress__star { width: 28px; height: 28px; }


    .thanks { gap: 60px; }
    .thanks__tab { width: 88px; height: 250px; border-width: 6px; border-radius: 0 60px 60px 0; padding-left: 44px; }
    .thanks__balloon { width: 112px; height: 112px; }
    .thanks__text { font-size: 32px; }

    /* --- Налаштування (settings.php) — все ×2 від бази --- */
    .account { width: 1120px; margin-top: 52px; }
    .account__card { padding: 52px 80px; border-radius: 56px; box-shadow: 0 16px 0 0 #F0F0F0; }
    .account__avatar { width: 108px; height: 108px; }
    .account__user { gap: 36px; }
    .account__name { font-size: 38px; }
    .account__level { font-size: 26px; }
    .account__divider { margin: 32px 0 36px; }
    .account__subtitle { font-size: 28px; margin: 32px 0 20px; }

    .settings-field { gap: 12px; margin-bottom: 28px; }
    .settings-field__label { font-size: 28px; }

    .settings-input {
        padding: 22px 36px;
        border-width: 4px;
        border-radius: 28px;
        font-size: 30px;
    }

    .settings-row { gap: 32px; }
    .btn-green--full { margin-top: 20px; padding: 32px 0; font-size: 28px; }
    .settings-msg { margin-top: 28px; font-size: 28px; }


    /* --- Преміум (premium.php) — все ×2 від бази --- */
    .main--premium { padding-top: 120px; }
    .premium { max-width: 2080px; }
    .premium__title { font-size: 50px; }
    .premium__subtitle { margin-top: 16px; font-size: 26px; }

    .plan {
        width: 584px;
        min-height: 672px;
        border-radius: 104px;
        padding: 60px 64px 164px;
    }

    .plan--mid {
        width: 604px;
        min-height: 796px;
        margin: 0 -28px;
    }

    .plan--year { min-height: 732px; }

    .plan__name { font-size: 42px; }
    .plan__note { margin-top: 12px; font-size: 26px; }
    .plan__price { gap: 20px; margin: 24px 0 36px; }
    .plan__amount { font-size: 112px; }
    .plan--mid .plan__amount { font-size: 148px; }
    .plan__unit { font-size: 28px; }

    .plan__features { gap: 30px; }
    .plan__features li { padding-left: 60px; font-size: 28px; }
    .plan__features li::before { font-size: 32px; }

    .plan__btn {
        left: 36px;
        right: 36px;
        bottom: -44px;
        height: 152px;
        border-radius: 80px;
        font-size: 30px;
    }

    .premium-cta {
        height: 108px;
        border-radius: 80px 80px 0 0;
        font-size: 34px;
    }
}

/* ===================== СТОРІНКА НАЛАШТУВАНЬ — МОБІЛЬНА ВЕРСІЯ ===================== */
@media (max-width: 1150px) {

    /* хедер сайту (лого і т.д.) схований — лишається як десктопний елемент */
    body:has(.account__topbar) .header {
        display: none;
    }

    /* фон, як на мобільній головній — біле полотно з дрібним зерном */
    body:has(.account__topbar) {
        background-color: #FFFFFF;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.33 0.33 0.33 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0.3 0.45 0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .account {
        width: 100%;
        margin-top: 18px;
        padding: 0 42px;                   /* бічні відступи ×3 — картка вужча */
    }

    /* панель "назад + заголовок" зʼявляється */
    .account__topbar {
        display: flex;
        margin: 4px 2px 20px;
    }

    /* кнопка "назад" — білий круг з зеленою стрілкою, як на макеті */
    .account__back {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #FFFFFF;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
    }

    .account__title {
        font-size: 17px;
        margin-right: 48px;                /* компенсує круглу кнопку зліва */
    }

    .account__card {
        padding: 28px 20px 24px;
        border-radius: 26px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);   /* м'яка тінь, як на макеті */
    }

    /* блок "хто залогінений" — лише на десктопі (на телефоні логін і так
       у полі «Нікнейм»). Видалення акаунта лишається доступним. */
    .account__user,
    .account__divider {
        display: none;
    }

    .settings-danger { margin-top: 28px; }

    /* мобільні поля (Phone, Старий пароль) зʼявляються */
    .settings-field--mobile {
        display: flex;
    }

    /* поля — світло-сірі, як на макеті */
    .settings-input {
        padding: 14px 18px;
        border: 1px solid #EDEDED;
        background: #F7F7F7;
    }

    .settings-input-wrap .settings-input {
        padding-right: 48px;               /* місце під іконку */
    }

    .settings-input-wrap__icon {
        display: block;
    }

    .settings-field {
        margin-bottom: 16px;
    }

    .settings-field__label {
        padding-left: 16px;                /* підпис на одній вертикалі з текстом поля */
    }

    /* паролі в стовпчик */
    .settings-row {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
    }

    .settings-row .settings-field {
        margin-bottom: 16px;
    }

    /* підзаголовок — звичайним регістром, як на макеті */
    .account__subtitle {
        font-size: 15px;
        text-transform: none;
        letter-spacing: 0;
        margin: 24px 0 16px;
    }

    .btn-green--full {
        margin-top: 14px;
        padding: 15px 0;
    }
}

/* ===================== ПІД-СТОРІНКИ (Хліб і т.д.) — МОБІЛЬНА ВЕРСІЯ ===================== */
/* ≤1150 — телефони І планшети: той самий поріг, де вмикається мобільна головна */
@media (max-width: 1150px) {

    /* ---- Мобільна верхня панель під-сторінок (Хліб і т.д.) ---- */
    body:has(.m-pagebar) .header,
    body:has(.m-pagebar) .day-pill {
        display: none;                     /* хедер і зелена плашка — десктопні елементи */
    }

    /* фон, як на мобільній головній — біле полотно з дрібним зерном */
    body:has(.m-pagebar) {
        background-color: #FFFFFF;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.33 0.33 0.33 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0.3 0.45 0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .m-pagebar {
        display: flex;
        margin: 22px 20px 18px;
    }

    /* кнопка "назад" — білий круг з зеленою стрілкою, як на налаштуваннях */
    .m-pagebar__back {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #FFFFFF;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .m-pagebar__title {
        flex: 1;
        text-align: center;
        margin-right: 48px;                /* компенсує кнопку зліва — заголовок по центру */
        font-family: 'TT Rounds Neue', sans-serif;
        font-weight: 500;
        font-size: 17px;
        color: #6f6f6f;
    }

    /* ---- Сторінка "Хліб": плеєр на мобільному ---- */
    /* main займає всю висоту, що лишилась під панеллю */
    body:has(.m-pagebar) .main {
        padding: 4px 32px 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
    }

    /* висока біла картка на весь вільний простір, всередині — текст і відео */
    .bread {
        align-self: stretch;
        flex: 1;
        justify-content: center;
        gap: 26px;

        background: #FFFFFF;
        border-radius: 28px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        padding: 28px 18px;
    }

    .bread-note {
        font-size: 14px;
        padding: 0 6px;
        margin: 0 auto;
    }

    /* сцена: займає всю висоту картки під текстом */
    .player-stage {
        display: block;
        flex: 1;
        position: relative;
        container-type: size;
        min-height: 0;
    }

    /* на планшеті відео звичайне, горизонтальне —
       вписується і в ширину, і у висоту сцени */
    .player {
        position: absolute;
        top: 50%;
        left: 50%;
        width: min(100cqw, calc(100cqh * 16 / 9));
        transform: translate(-50%, -50%);
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    }

    .player__volume {
        display: none;                     /* повзунок гучності не влазить на тачі */
    }

    /* ---- Сторінка ігор: хаб вибору гри на мобільному ----
       Картки колонкою на всю ширину, номер гри — золотий "водяний знак"
       у правому верхньому куті. Самі ігри поки не адаптовані. */
    .games-main .ghub {
        width: 100%;
        max-width: 520px;              /* та сама колонка, що на мобільній головній */
        margin: 0 auto;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 14px;
    }

    .games-main .gcard {
        width: 100%;
        min-height: 0;
        border-radius: 20px;
        padding: 18px 20px 16px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
    }

    .games-main .gcard__num {
        position: absolute;
        top: 14px;
        right: 20px;
        margin: 0;
        font-size: 26px;
        letter-spacing: 2px;
        opacity: 0.45;                 /* напівпрозорий — як водяний знак */
    }

    .games-main .gcard__title {
        font-size: 16px;
        margin-bottom: 6px;
        padding-right: 56px;           /* заголовок не наїжджає на номер */
    }

    .games-main .gcard__desc {
        font-size: 13px;
        margin-bottom: 12px;
        padding-right: 30px;
    }

    .games-main .gcard__tag {
        padding: 6px 12px;
        border-radius: 12px;
        font-size: 11px;
    }

    .games-main .gcard__arrow {
        right: 18px;
        bottom: 14px;
        font-size: 20px;
    }

    /* ---- Екрани самих ігор на мобільному — та сама колонка 520px ---- */
    .games-main .game {
        width: 100%;
        max-width: 520px;
    }

    /* обгортки всередині гри (#tfPlay, #dayqPlay...) — на всю ширину колонки,
       інакше стискаються під короткий текст питання */
    .games-main .game > div {
        width: 100%;
    }

    /* кнопка "‹ До ігор" всередині гри схована — назад веде
       верхня кнопка мобільної панелі (див. games-core.js) */
    .games-main .game__back {
        display: none;
    }

    .games-main .game__title {
        font-size: 17px;
    }

    .games-main .game__hint,
    .games-main .game__progress {
        font-size: 13px;
    }

    .games-main .game__score {
        font-size: 19px;
    }

    .games-main .order-item {
        gap: 10px;
        border-radius: 14px;
        padding: 12px 14px;
    }

    .games-main .order-item__grip { font-size: 13px; }
    .games-main .order-item__icon { font-size: 20px; }
    .games-main .order-item__text { font-size: 14px; }

    .games-main .tf-card {
        min-height: 110px;
        border-radius: 18px;
        padding: 20px 22px;
        margin-bottom: 18px;
    }

    .games-main .tf-card__text {
        font-size: 16px;
    }

    /* кнопки ✓/✗ — на всю ширину колонки, навпіл */
    .games-main .tf-btns {
        width: 100%;
        gap: 12px;
    }

    .games-main .tf-btn {
        flex: 1;
        padding: 14px 10px;
        font-size: 15px;
    }

    .games-main .dayq-days {
        gap: 10px;
    }

    .games-main .dayq-btn {
        width: 46px;
        height: 46px;
        font-size: 16px;
    }

    /* поле "Саду Едему" (вівторок) — не ширше за колонку */
    .games-main .eden-field {
        width: 100%;
    }

    /* ---- Сторінка статусів на мобільному ----
       Стрічка правил — біла картка зі стовпчиком рядків (як картки
       завдань на мобільній головній), таблиці гортаються пальцем. */
    body:has(.m-pagebar) .ticker {
        background: #FFFFFF;
        margin: 0 20px 8px;
        padding: 14px 18px;
        border-radius: 16px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
        white-space: normal;
    }

    body:has(.m-pagebar) .ticker__track {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    body:has(.m-pagebar) .ticker__item {
        font-size: 12px;
        color: #8a8a8a;
        text-align: center;
    }

    /* градієнт-підказка справа і "куточок" шапки — під білий фон */
    body:has(.m-pagebar) .status-scroll-wrap::after {
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
    }

    body:has(.m-pagebar) .status-table__head::before {
        background: #FFFFFF;
    }

    /* ---- Преміум на мобільному: плани колонкою ---- */
    .main--premium {
        padding: 0 28px 20px;
        overflow-y: auto;
    }

    .premium__title {
        font-size: 22px;
        text-align: center;
    }

    .premium__subtitle {
        text-align: center;
        padding: 0 12px;
    }

    .plans {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 400px;
        gap: 40px;
        margin: 28px auto 30px;
        top: 0;                        /* базовий підйом карток тут зайвий */
    }

    .plan,
    .plan--mid {
        width: 100%;
        min-height: 0;
        margin: 0;
        border-radius: 36px;
        padding: 26px 28px 74px;
    }

    .premium-cta {
        border-radius: 24px 24px 0 0;
        font-size: 15px;
    }
}

/* На телефоні (≤600) відео повернуте на 90° і розтягнуте по вертикалі —
   дивитись, повернувши телефон набік.

   Поворот діє лише тоді, коли в плеєрі справді лежить наше <video>.
   Рамку YouTube повертати не можна: разом із картинкою набік лягають
   і його власні кнопки, і напис зверху, а кнопка «на весь екран»
   повертає ще раз — виходить догори дриґом. У YouTube для цього є
   свій повний екран, який сам розвертає телефон як треба. */
@media (max-width: 600px) {
    .player:has(.player__video) {
        /* ширина елемента стає видимою висотою після повороту */
        width: min(100cqh, calc(100cqw * 16 / 9));
        transform: translate(-50%, -50%) rotate(90deg);
    }
}

/* ===================== СТОРІНКА ВХОДУ — МОБІЛЬНА ВЕРСІЯ (≤1150) ===================== */
/* У стилі мобільних сторінок: білий зернистий фон, без зеленої картки —
   хрестик зверху, сірі поля-пігулки, зелена кнопка "Увійти",
   нижні посилання притиснуті до низу екрана. */

/* на десктопі нижніх посилань немає */
.auth-links { display: none; }

@media (max-width: 1150px) {

    .auth-body {
        background-color: #FFFFFF;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.33 0.33 0.33 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0.3 0.45 0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .auth {
        flex-direction: column;
        align-items: center;
        padding: 44px 28px 24px;
    }

    /* картка "розчиняється" — контент прямо на фоні */
    .auth-card {
        width: min(400px, 100%);
        min-height: 0;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .auth-card__logo { display: none; }

    /* хрестик переїжджає нагору, над заголовок */
    .auth-card__cross {
        position: static;
        order: -1;
        transform: none;
        width: 46px;
        margin: 0 auto 44px;
    }

    .auth-card__title {
        font-size: 32px;
        color: #5C5C5C;
        margin-bottom: 40px;
    }

    .auth-form { width: 100%; }

    /* поля — світло-сірі пігулки на білому (трохи вужчі за форму і вищі) */
    .auth-field {
        width: calc(100% - 5px);
        margin-left: auto;
        margin-right: auto;
    }

    .auth-field__input {
        height: 74px;
        background: #F3F3F3;
        border: 1.5px solid #EBEBEB;
        color: #4a4a4a;
        font-size: 15px;
    }

    .auth-field__input::placeholder { color: #9a9a9a; }

    .auth-field__input:focus {
        background: #FFFFFF;
        border-color: #82CD47;
    }

    /* скляний відблиск був під зелену картку — на сірому полі зайвий */
    .auth-field::after { display: none; }

    /* іконки в полях — правіше, текст — ще правіше за іконку */
    .auth-field__icon { left: 28px; }

    /* у замка всередині SVG більші порожні поля — робимо його більшим,
       зсунувши так, щоб візуальний центр збігався з іконкою людини (38px) */
    .auth-field__icon[src*="lock1"] {
        width: 24px;
        height: 24px;
        left: 26px;
    }

    .auth-field__input {
        padding-left: 61px;
        padding-top: 4px;              /* текст у полі трохи нижче центру */
    }

    .auth-remember {
        margin-left: 3px;
        gap: 12px;                     /* текст далі від чекбокса */
        color: #5C5C5C;
        font-weight: 400;              /* Regular */
        font-size: 14px;
    }

    /* чекбокс: білий із сірою рамкою (на білому фоні без рамки не видно),
       більший — щоб зручно влучати пальцем */
    .auth-remember__box {
        width: 25px;
        height: 25px;
        border-radius: 6px;
        background: #FFFFFF;
        border: 2px solid #DCDCDC;
        font-size: 14px;
    }

    .auth-forgot {
        color: #5C5C5C;
        font-weight: 600;              /* DemiBold */
        font-size: 14px;
    }

    .auth-submit {
        width: calc(100% - 5px);
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;                 /* відступи над і під рядком чекбокса — однакові */
        height: 74px;
        background: #7CB96F;
        color: #FFFFFF;
        font-size: 16px;
        box-shadow: 0 10px 24px rgba(124, 185, 111, 0.35);
    }

    .auth-alt { color: #5C5C5C; }

    /* більший відступ між "Немає акаунта?" і "Реєстрація" */
    .auth-alt__link {
        color: #5C5C5C;
        margin-left: 50px;
    }

    /* ---- Реєстрація: блок статі на білому фоні ----
       (базові стилі — біле скло під зелену картку, тут перефарбовуємо) */
    .auth-gender__label,
    .auth-gender__text {
        color: #5C5C5C;
    }

    .auth-gender__dot {
        background: #FFFFFF;
        border-color: #DCDCDC;
    }

    .auth-gender__opt:hover .auth-gender__dot {
        background: #FFFFFF;
        border-color: #7CB96F;
    }

    .auth-gender__opt input:checked ~ .auth-gender__dot {
        background: #FFFFFF;
        border-color: #7CB96F;
    }

    /* нижні посилання: дві колонки внизу, підняті від краю екрана */
    .auth-links {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;       /* колонки ближче до центру, а не по краях */
        column-gap: 28px;              /* відступ між лівою і правою колонками — регулюється тут */
        row-gap: 12px;                 /* відступ між рядками посилань — регулюється тут */
        width: min(400px, 100%);
        margin-top: auto;
        margin-bottom: 44px;           /* відступ від низу — регулюється тут */
        padding-top: 48px;
    }

    .auth-links a {
        font-family: 'TT Rounds Neue', sans-serif;
        font-weight: 400;
        font-size: 12px;
        color: #6f6f6f;
        text-decoration: none;
    }

    .auth-links a:nth-child(2n) { text-align: right; }
}

/* ===================== ЗВІТ: МЕНЮ ВИБОРУ ДНЯ ===================== */
.report__day-wrap {
    position: relative;
}

.report-day-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 6;

    min-width: 235px;
    padding: 8px;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);

    display: none;
    flex-direction: column;
    gap: 2px;
}

.report-day-menu.is-open { display: flex; }

.report-day-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 12px;
    border: none;
    border-radius: 10px;
    background: none;
    cursor: pointer;
    text-align: left;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #4a4a4a;

    transition: background-color 0.12s ease, color 0.12s ease;
}

.report-day-menu__item:hover:not(:disabled) {
    background: #F5FBEF;
    color: #389238;
}

/* день уже зданий чи прийнятий — сірий і неклікабельний */
.report-day-menu__item--blocked {
    color: #b9b9b9;
    cursor: default;
}

.report-day-menu__mark { font-size: 13px; }

.report-day-menu__mark--ok {
    color: #58A82F;
    font-weight: 800;
}

/* ===================== СПОВІЩЕННЯ: СПИСОК У ДРОПДАУНІ ===================== */
.notif__item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 0;
    border-bottom: 1px solid #f2ecd9;
    text-align: left;
}

.notif__item:first-child { padding-top: 0; }
.notif__item:last-child  { border-bottom: none; padding-bottom: 0; }

.notif__item-text {
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.4;
}

/* непрочитане — жирне */
.notif__item--new .notif__item-text { font-weight: 800; }

.notif__item-date {
    font-size: 11px;
    color: #b3a88e;
}

/* ===================== ТОСТ (коротке підтвердження знизу) ===================== */
.toast {
    position: fixed;
    left: 50%;
    bottom: 46px;
    transform: translateX(-50%) translateY(16px);
    z-index: 200;

    padding: 13px 26px;
    border-radius: 30px;
    background: #7DC94E;
    box-shadow: 0 5px 0 0 #389238, 0 12px 30px rgba(0, 0, 0, 0.18);

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #FFFFFF;

    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.toast.is-shown {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===================== КНОПКА АДМІНА (під вкладкою "Вдячність") ===================== */
.admin-btn {
    position: absolute;
    left: 14px;                    /* нижче таба, щоб не налазити на нього */
    top: calc(50% + 84px);
    z-index: 40;

    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #FFFDF6;
    border: 1px solid #F0E6CF;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
    text-decoration: none;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}

.admin-btn:hover {
    background: #FFFFFF;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transform: scale(1.1);
}

/* ---- Гортання тижнів на головній (бачить лише адмін) ---- */
.week-nav {
    position: absolute;
    top: 16px;                     /* відступ від хедера — регулюється тут */
    right: 28px;                   /* притиснуто до правого краю сторінки */
    z-index: 40;

    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.week-nav__btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3px;           /* центрує гліф ‹ › по висоті */

    border-radius: 50%;
    background: #7DC94E;
    box-shadow: 0 3px 0 0 #389238; /* та сама "товщина", що в зелених кнопок */

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
    color: #FFFFFF;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.week-nav__btn:hover {
    background: #8FD65F;
    transform: translateY(-1px);
}

.week-nav__btn--off {
    opacity: 0.35;
    pointer-events: none;          /* далі назад гортати нікуди */
}

.week-nav__label {
    min-width: 120px;
    text-align: center;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #4a4a4a;
}

/* ===================== АДМІН-ПАНЕЛЬ (admin.php) ===================== */
.admin {
    width: min(880px, 94vw);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding-bottom: 50px;
}

.admin-section__title {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #3d3d3d;
    margin-bottom: 14px;
}

.admin-card {
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 8px 0 0 #F0F0F0;
    padding: 22px 26px;
}

.admin-empty {
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: 15px;
    color: #9a9a9a;
}

/* ---- Картка звіту ---- */
.admin-report + .admin-report { margin-top: 16px; }

.admin-report__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.admin-report__user {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #3d3d3d;
}

.admin-report__date {
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: 13px;
    color: #9a9a9a;
}

.admin-report__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.admin-chip {
    padding: 6px 13px;
    border-radius: 20px;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 12px;
}

.admin-chip--done { background: #F5FBEF; color: #58A82F; }
.admin-chip--skip { background: #FFF3F0; color: #C0432A; }

.admin-report__note {
    margin-bottom: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #FFFBF2;

    font-family: 'TT Rounds Neue', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #6b6b6b;
}

.admin-report__actions {
    display: flex;
    justify-content: flex-end;
}

/* рядок дій звіту: коментар + "Відхилити" + "Прийняти" */
.admin-report__form {
    display: flex;
    gap: 10px;
}

.admin-report__form .admin-input { flex: 1; }

/* червона кнопка — як btn-green, тільки в кольорах відмови */
.btn-red {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #F26B4F;
    color: #FFFFFF;
    border: none;
    border-radius: 30px;
    padding: 14px 34px;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    box-shadow: 0 4px 0 0 #B84730;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
}

.btn-red:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 0 #B84730;
}

.btn-red:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 0 #B84730;
}

/* ---- Форма розсилки сповіщень ---- */
.admin-notify {
    position: relative;            /* точка відліку для панелі емодзі */
    display: flex;
    gap: 12px;
}

/* кнопка-смайлик у формі */
.admin-emoji {
    flex-shrink: 0;
    width: 46px;
    border: 2px solid #F0E6CF;
    border-radius: 14px;
    background: #FFFBF2;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.admin-emoji:hover {
    border-color: #82CD47;
    background: #FFFFFF;
}

.admin-emoji img {
    width: 20px;
    height: 20px;
}

/* панель емодзі відкривається над формою, біля смайлика */
.admin-notify .emoji-picker {
    bottom: calc(100% + 10px);
    right: 0;
}

.admin-select,
.admin-input {
    padding: 12px 16px;
    border: 2px solid #F0E6CF;
    border-radius: 14px;
    background: #FFFBF2;
    outline: none;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #4a4a4a;
}

.admin-input { flex: 1; }

.admin-select:focus,
.admin-input:focus { border-color: #82CD47; }

/* ---- Таблиця активності ---- */
.admin-activity {
    width: 100%;
    border-collapse: collapse;
}

.admin-activity th {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid #f2f2f2;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #9a9a9a;
}

.admin-activity td {
    padding: 11px 12px;
    border-bottom: 1px solid #f7f7f7;

    font-family: 'TT Rounds Neue', sans-serif;
    font-size: 14px;
    color: #4a4a4a;
}

.admin-activity tr:last-child td { border-bottom: none; }

.admin-online { color: #58A82F; font-weight: 800; }

/* ===================== НАЛАШТУВАННЯ: ПОВІДОМЛЕННЯ ПРО ЗБЕРЕЖЕННЯ ===================== */
.settings-msg {
    margin-top: 14px;
    text-align: center;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #58A82F;
}

.settings-msg--error { color: #E25246; }

/* ---- пошта під полем Email ---- */
/* У спокої тут одне тихе посилання; решта з'являється за потреби. */
.settings-mail {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.settings-mail:empty { display: none; }

/* «Змінити пошту», «Відмінити», «Скасувати» — однакові тихі посилання */
.settings-mail__link {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-size: 13px;
    color: #b9b1a0;
    text-decoration: underline dotted;
    text-underline-offset: 4px;
    transition: color .15s ease;
}

.settings-mail__link:hover  { color: #8a8272; }
.settings-mail__link[hidden] { display: none; }

/* адреса, яка чекає підтвердження */
.settings-mail__pending {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;

    font-family: 'TT Rounds Neue', sans-serif;
    font-size: 13px;
    color: #C99A2E;
}

.settings-mail__pending[hidden] { display: none; }
.settings-mail__pending b { font-weight: 800; }

/* Підтверджена пошта — тиха зелена галочка в кінці поля */
.settings-mail-ok {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);

    display: grid;
    place-items: center;
    color: #58A82F;
    pointer-events: none;
}

.settings-mail-ok[hidden] { display: none; }

/* щоб довга адреса не заповзала під галочку */
.settings-input-wrap:has(.settings-mail-ok) .settings-input { padding-right: 46px; }

.settings-mail__send {
    padding: 9px 20px;
    border: none;
    border-radius: 999px;
    background: #FFFDF7;
    box-shadow: 0 4px 12px rgba(140, 110, 50, 0.16);

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #5c5343;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .12s ease;
}

.settings-mail__send:hover  { box-shadow: 0 6px 16px rgba(140, 110, 50, 0.22); }
.settings-mail__send:active { transform: translateY(1px); }
.settings-mail__send:disabled { opacity: .6; cursor: default; }

.settings-mail__note {
    margin-top: 8px;
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: #9a9a9a;
}

.settings-mail__note:empty { display: none; }
.settings-mail__note--warn { color: #E25246; }
.settings-mail__note--ok   { color: #58A82F; }

/* нікнейм — лише для читання */
.settings-input[readonly] {
    color: #9a9a9a;
    background: #F4F4F4;
    cursor: not-allowed;
}

/* ===================== МЕНЮ ДНЯ ЗВІТУ — ВЕЛИКІ ЕКРАНИ ===================== */
/* (окремо в кінці файлу, бо базові стилі меню описані нижче за основні
   медіаблоки і інакше перекривали б масштабування) */
@media (min-width: 2560px) {
    .report-day-menu {
        min-width: 313px;
        padding: 11px;
        border-radius: 19px;
        gap: 3px;
    }

    .report-day-menu__item {
        gap: 19px;
        padding: 12px 16px;
        border-radius: 13px;
        font-size: 17px;
    }

    .report-day-menu__mark { font-size: 17px; }
}

@media (min-width: 3800px) {
    .report-day-menu {
        min-width: 470px;
        padding: 16px;
        border-radius: 28px;
        gap: 4px;
    }

    .report-day-menu__item {
        gap: 28px;
        padding: 18px 24px;
        border-radius: 20px;
        font-size: 26px;
    }

    .report-day-menu__mark { font-size: 26px; }
}

/* ===================== КОНФЕТТІ + "ВСЕ ПРОЧИТАНО" (сторінка заповіту) ===================== */
.confetti {
    position: fixed;
    top: -20px;
    z-index: 150;
    pointer-events: none;
    animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
    to {
        transform: translate(var(--drift, 0), 108vh) rotate(var(--spin, 360deg));
        opacity: 0.9;
    }
}

/* напис "У цьому дні все прочитано" */
.ot-done {
    position: fixed;
    left: 50%;
    top: 16%;
    transform: translateX(-50%) scale(0.8);
    z-index: 151;

    max-width: calc(100vw - 40px);
    padding: 16px 32px;
    border-radius: 40px;
    background: #7DC94E;
    box-shadow: 0 6px 0 0 #389238, 0 14px 34px rgba(0, 0, 0, 0.25);

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 900;
    font-size: 20px;
    color: #FFFFFF;
    text-align: center;

    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

.ot-done.is-shown {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

@media (max-width: 1600px)  { .ot-done { font-size: 17px; padding: 13px 27px; } }
@media (min-width: 2560px)  { .ot-done { font-size: 27px; padding: 21px 43px; box-shadow: 0 8px 0 0 #389238, 0 19px 45px rgba(0,0,0,0.25); } }
@media (min-width: 3800px)  { .ot-done { font-size: 40px; padding: 32px 64px; border-radius: 60px; box-shadow: 0 12px 0 0 #389238, 0 28px 68px rgba(0,0,0,0.25); } }

/* ===================== ВІТАЛЬНА ПІДКАЗКА (новий користувач) ===================== */
.welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(45, 42, 35, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.welcome-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.welcome {
    width: min(500px, 100%);
    background: #FFFDF6;
    border-radius: 30px;
    padding: 38px 42px 34px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    text-align: center;

    transform: translateY(14px) scale(0.96);
    transition: transform 0.3s ease;
}

.welcome-overlay.is-open .welcome {
    transform: translateY(0) scale(1);
}

.welcome__flower {
    display: block;
    font-size: 52px;
    margin-bottom: 10px;
    animation: daisy-breathe 3s ease-in-out infinite;
}

.welcome__title {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: #3d3d3d;
    margin-bottom: 12px;
}

.welcome__text {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: #8a8a8a;
    margin-bottom: 22px;
}

/* мобільний варіант тексту показується лише на ≤1150 */
.welcome__text--mobile { display: none; }

@media (max-width: 1150px) {
    .welcome__text--desktop { display: none; }
    .welcome__text--mobile  { display: block; }
    .welcome { padding: 30px 26px 28px; }
}

@media (min-width: 2560px) {
    .welcome { width: min(665px, 100%); border-radius: 40px; padding: 51px 56px 45px; }
    .welcome__flower { font-size: 69px; }
    .welcome__title { font-size: 32px; }
    .welcome__text { font-size: 20px; }
}

@media (min-width: 3800px) {
    .welcome { width: min(1000px, 100%); border-radius: 60px; padding: 76px 84px 68px; }
    .welcome__flower { font-size: 104px; }
    .welcome__title { font-size: 48px; }
    .welcome__text { font-size: 30px; }
}

/* ===================== ВИХІД НА МОБІЛЬНИХ НАЛАШТУВАННЯХ ===================== */
.settings-logout { display: none; }

@media (max-width: 1150px) {
    .settings-logout {
        display: block;
        margin-top: 16px;
        padding: 12px 0;
        text-align: center;

        font-family: 'TT Rounds Neue', sans-serif;
        font-weight: 800;
        font-size: 14px;
        color: #E25246;
        text-decoration: none;
    }
}


/* ===================== ІГРИ: ПІДПИСИ ХАБІВ (Буття / Матвія) ===================== */
/* Хаби — flex-контейнери, тож підпис розтягуємо на весь рядок */
.ghub__label {
    flex-basis: 100%;
    margin: 6px 0 -6px;
    text-align: center;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 21px;
    color: #7a5a2b;               /* коричневий — у тон пергаменту */
}

/* другий хаб (Новий заповіт) — відступ від блоку Буття */
#ghubNT .ghub__label { margin-top: 26px; }

/* ===================== ЖИВА ІСТОРІЯ (Буття 15–16) ===================== */
/* Формат без хабу: одна сцена, у якій розповідь чергується з інтерактивом */

.st-stage {
    width: min(860px, 100%);
    margin: 0 auto;
    padding: 30px 28px 34px;
    border-radius: 28px;
    color: #F6EEDC;

    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

/* нічне небо — Буття 15 */
.st-stage--night {
    background:
        radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.10), transparent 45%),
        linear-gradient(160deg, #1B2340 0%, #232B4D 45%, #14182C 100%);
}

/* пустеля — Буття 16 */
.st-stage--desert {
    background:
        radial-gradient(circle at 78% 12%, rgba(255, 226, 150, 0.22), transparent 50%),
        linear-gradient(160deg, #5B4326 0%, #7A5A33 50%, #3E2E1B 100%);
}

.st-head { text-align: center; margin-bottom: 22px; }

.st-title {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 27px;
    margin: 0 0 4px;
    color: #FFF6E2;
}

.st-sub {
    font-size: 14px;
    opacity: 0.65;
    letter-spacing: 0.4px;
}

.st-bar {
    height: 5px;
    margin-top: 14px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.st-bar__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: #82CD47;
    transition: width 0.35s ease;
}

/* ---- Панель тексту ---- */
.st-panel {
    min-height: 96px;
    padding: 22px 24px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.07);
    border-left: 4px solid #CFA050;
}

.st-panel--in { animation: stFade 0.4s ease; }

@keyframes stFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.st-who {
    display: block;
    margin-bottom: 8px;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #F3C969;
    letter-spacing: 0.5px;
}

.st-text {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
}

/* ---- Варіанти вибору ---- */
.st-choices {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.st-choice {
    padding: 15px 18px;
    text-align: left;
    border: 2px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    color: #F6EEDC;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 600;
    font-size: 16px;

    transition: transform 0.12s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.st-choice:hover:enabled {
    transform: translateY(-2px);
    border-color: #82CD47;
    background: rgba(255, 255, 255, 0.11);
}

.st-choice--ok  { background: #4E8B33; border-color: #82CD47; }
.st-choice--bad { background: #96412F; border-color: #F26B4F; }
.st-choice:disabled { cursor: default; }

.st-feedback {
    margin: 16px 0 0;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    font-size: 16px;
    line-height: 1.55;
}

/* ---- Міні-гра: зорі ---- */
.st-sky {
    position: relative;
    height: 300px;
    margin-top: 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #0C1026 0%, #1A2244 100%);
    overflow: hidden;
    cursor: crosshair;
}

.st-star {
    position: absolute;
    color: #FFF3C4;
    cursor: pointer;
    user-select: none;
    animation: stTwinkle 2.4s ease-in-out infinite;
    text-shadow: 0 0 8px rgba(255, 240, 190, 0.9);
}

.st-star--done {
    color: #82CD47;
    opacity: 0.45;
    animation: none;
    cursor: default;
}

@keyframes stTwinkle {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.25); }
}

/* ---- Міні-гра: птахи ---- */
.st-field {
    position: relative;
    height: 300px;
    margin-top: 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #6B4F2C 0%, #3A2A17 100%);
    overflow: hidden;
}

.st-altar {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    font-size: 46px;
}

.st-bird {
    position: absolute;
    font-size: 30px;
    cursor: pointer;
    user-select: none;
    transition: left 3.6s linear, top 3.6s linear, opacity 0.3s ease, transform 0.3s ease;
}

.st-bird--gone { opacity: 0; transform: scale(1.7) translateY(-24px); }
.st-bird--sit  { filter: grayscale(1); opacity: 0.5; }

/* спільний лічильник міні-ігор */
.st-hud {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #FFF6E2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

/* ---- Міні-гра: зістав пари ---- */
.st-match {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.st-col { display: grid; gap: 10px; align-content: start; }

.st-tile {
    padding: 14px 15px;
    border: 2px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: #F6EEDC;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;

    transition: transform 0.12s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.st-tile:hover { transform: translateY(-2px); border-color: #CFA050; }
.st-tile--pick { border-color: #F3C969; background: rgba(243, 201, 105, 0.18); }
.st-tile--done { background: #4E8B33; border-color: #82CD47; cursor: default; opacity: 0.85; }
.st-tile--bad  { background: #96412F; border-color: #F26B4F; }

/* ---- Керування і фінал ---- */
.st-actions { display: flex; justify-content: center; margin-top: 20px; }

.st-final { text-align: center; padding: 26px 10px 6px; }

.st-final__score {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 21px;
    margin: 0 0 18px;
    color: #FFF6E2;
}

@media (max-width: 1150px) {
    .st-stage { padding: 22px 16px 26px; border-radius: 22px; }
    .st-title { font-size: 22px; }
    .st-text  { font-size: 16px; }
    .st-choice, .st-tile { font-size: 14px; }
    .st-sky, .st-field { height: 240px; }
    .st-match { grid-template-columns: 1fr; }
}

/* ===================== БАГАТОСТИЛЬНІ ІГРИ (Буття 17+, Матвія 15+) ===================== */

.gm-body { display: flex; flex-direction: column; align-items: center; width: 100%; }

.gm-status {
    margin: 16px 0 0;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #7a5a2b;
    text-align: center;
}

.gm-finish { text-align: center; margin-top: 22px; }

.gm-finish__score {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #4a4a4a;
    margin: 0 0 16px;
}

/* ---- Хронологія ---- */
.gm-line {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 18px 14px;
    margin-bottom: 20px;
    border-radius: 18px;
    background: #FFFBF2;
    border: 2px dashed #E3D5B8;
    width: min(640px, 100%);
}

.gm-line__slot {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #F4ECDA;
    color: #C3B191;
    font-size: 26px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.gm-line__slot--on {
    background: #82CD47;
    transform: scale(1.06);
}

.gm-pool { display: grid; gap: 10px; width: min(640px, 100%); }

.gm-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border: 2px solid #F0E6CF;
    border-radius: 16px;
    background: #FFFDF6;
    cursor: pointer;
    text-align: left;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #5a5a5a;

    transition: transform 0.12s ease, border-color 0.15s ease, opacity 0.2s ease;
}

.gm-chip:hover { transform: translateY(-2px); border-color: #82CD47; }
.gm-chip__icon { font-size: 22px; }
.gm-chip--used { opacity: 0.35; cursor: default; border-color: #82CD47; }
.gm-chip--bad  { border-color: #F26B4F; background: #FFEDE8; }

/* ---- Карта-подорож ---- */
.gm-map {
    position: relative;
    width: min(700px, 100%);
    height: 380px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 30% 70%, rgba(130, 205, 71, 0.18), transparent 45%),
        linear-gradient(160deg, #F3E7C9 0%, #E7D3A8 60%, #D6BE8E 100%);
    background-color: #EFE0BC;
    border: 2px solid #D9C7A0;
    overflow: hidden;
}

.gm-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.gm-map__route {
    fill: none;
    stroke: #C0873F;
    stroke-width: 0.9;
    stroke-dasharray: 3 2;
    vector-effect: non-scaling-stroke;
}

.gm-dot {
    position: absolute;
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 4px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.gm-dot__pin {
    font-size: 20px;
    color: #B0894F;
    transition: transform 0.15s ease, color 0.15s ease;
}

.gm-dot__name {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #6B5426;
    white-space: nowrap;
    background: rgba(255, 253, 246, 0.85);
    padding: 1px 7px;
    border-radius: 8px;
}

.gm-dot:hover .gm-dot__pin { transform: scale(1.3); color: #82CD47; }
.gm-dot--on  .gm-dot__pin { color: #4E8B33; transform: scale(1.35); }
.gm-dot--on  .gm-dot__name { background: #82CD47; color: #FFFFFF; }
.gm-dot--bad .gm-dot__pin { color: #F26B4F; transform: scale(1.3); }

/* ---- Пам’ять ---- */
.gm-scene {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    width: min(660px, 100%);
    padding: 24px 18px;
    margin-top: 14px;
    border-radius: 20px;
    background: #FFFBF2;
    border: 2px solid #F0E6CF;
}

.gm-scene__item {
    display: grid;
    justify-items: center;
    gap: 4px;
    width: 108px;
}

.gm-scene__icon { font-size: 40px; }

.gm-scene__label {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #6f6f6f;
    text-align: center;
}

/* ---- Пари (у світлій темі сторінки ігор) ---- */
.gm-col .gm-tile {
    background: #FFFDF6;
    border-color: #F0E6CF;
    color: #5a5a5a;
}

.gm-col .gm-tile.st-tile--pick { background: #FFF3D6; border-color: #CFA050; }
.gm-col .gm-tile.st-tile--done { background: #82CD47; border-color: #82CD47; color: #FFFFFF; }
.gm-col .gm-tile.st-tile--bad  { background: #F26B4F; border-color: #F26B4F; color: #FFFFFF; }

/* ---- Аркада ---- */
.gm-arcade {
    position: relative;
    width: min(700px, 100%);
    height: 400px;
    border-radius: 20px;
    background: linear-gradient(180deg, #FDF6E6 0%, #EFDFBE 100%);
    border: 2px solid #E3D5B8;
    overflow: hidden;
}

.gm-arcade .st-hud { color: #6B5426; text-shadow: none; }

.gm-drop {
    position: absolute;
    font-size: 34px;
    cursor: pointer;
    user-select: none;
    transition: top 4.2s linear, opacity 0.25s ease, transform 0.25s ease;
}

.gm-drop--bad { filter: saturate(1.2); }
.gm-drop--hit { opacity: 0; transform: scale(1.6); }

/* ---- Рішення з наслідками ---- */
.gm-sim__intro {
    width: min(660px, 100%);
    margin: 0 0 18px;
    padding: 16px 20px;
    border-radius: 16px;
    background: #FFF6E2;
    border-left: 4px solid #CFA050;
    font-size: 16px;
    line-height: 1.55;
    color: #5a5a5a;
}

.gm-sim__q {
    width: min(660px, 100%);
    margin-bottom: 14px;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #4a4a4a;
}

.gm-sim__opts { width: min(660px, 100%); }

.gm-choice {
    border-color: #F0E6CF;
    background: #FFFDF6;
    color: #5a5a5a;
}

.gm-choice:hover:enabled { border-color: #82CD47; background: #FFFFFF; }
.gm-choice.st-choice--ok  { background: #82CD47; border-color: #82CD47; color: #FFFFFF; }
.gm-choice.st-choice--bad { background: #F26B4F; border-color: #F26B4F; color: #FFFFFF; }

.gm-sim__res {
    width: min(660px, 100%);
    margin: 16px 0 0;
    padding: 14px 18px;
    border-radius: 14px;
    background: #F4ECDA;
    font-size: 16px;
    line-height: 1.55;
    color: #5a5a5a;
}

.gm-sim__next { margin-top: 16px; }

/* ---- Анаграма ---- */
.gm-ana__hint {
    margin: 4px 0 16px;
    font-size: 16px;
    color: #7a5a2b;
    text-align: center;
}

.gm-ana__slot {
    min-width: 260px;
    min-height: 60px;
    display: grid;
    place-items: center;
    padding: 10px 20px;
    border-radius: 16px;
    background: #FFFBF2;
    border: 2px dashed #E3D5B8;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 28px;
    letter-spacing: 3px;
    color: #4a4a4a;
}

.gm-ana__slot--ok  { background: #82CD47; border-style: solid; border-color: #82CD47; color: #FFFFFF; }
.gm-ana__slot--bad { background: #FFEDE8; border-color: #F26B4F; color: #C4442A; }

.gm-ana__pool {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 18px 0;
    width: min(560px, 100%);
}

.gm-ana__letter {
    width: 52px;
    height: 52px;
    border: 2px solid #F0E6CF;
    border-radius: 14px;
    background: #FFFDF6;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: #5a5a5a;

    transition: transform 0.12s ease, opacity 0.2s ease, border-color 0.15s ease;
}

.gm-ana__letter:hover { transform: translateY(-3px); border-color: #82CD47; }
.gm-ana__letter--used { opacity: 0.25; cursor: default; transform: none; }

@media (max-width: 1150px) {
    .gm-map { height: 300px; }
    .gm-dot__name { font-size: 11px; }
    .gm-arcade { height: 330px; }
    .gm-line__slot { width: 44px; height: 44px; font-size: 21px; }
    .gm-scene__item { width: 88px; }
    .gm-scene__icon { font-size: 32px; }
    .gm-ana__letter { width: 44px; height: 44px; font-size: 20px; }
    .gm-ana__slot { font-size: 22px; min-width: 200px; }
}

/* ===================== ПЕРЕМИКАЧ ЗАПОВІТІВ (сторінка ігор) ===================== */
/* Панелі .tpane — це обгортки навколо хабів. Ховаємо саме їх, бо рушій ігор
   при поверненні до хабу знімає hidden з усіх .ghub / .gm-root усередині. */
.tswitch {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

/* Варіант для сторінки ігор: перемикач виведений з потоку, інакше його
   смуга зсувала б блок ігор униз і той не зміг би центруватися відносно
   всієї площі під шапкою. Точне top рахує скрипт унизу games.php,
   180px — запасне значення. z-index обов'язковий: блок ігор теж
   позиціонований і йде пізніше в розмітці, тож накривав би перемикач. */
/* поки відкрита гра, перемикач заповітів зайвий */
body.is-playing .tswitch--over { display: none; }

.tswitch--over {
    position: absolute;
    top: 180px;
    left: 0;
    z-index: 50;
    margin: 0;
}

/* Картки центруємо по вертикалі. Нижній відступ (його ставить той самий
   скрипт, рівно у висоту зеленої плашки) піднімає вміст так, що центр
   збігається з центром усієї площі під шапкою, а не лише під плашкою. */
.games-main {
    align-items: center;
}

.tswitch__label {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #9a9a9a;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

.tswitch__label.is-active { color: #4a4a4a; }

.tswitch__box {
    position: relative;
    flex-shrink: 0;
    width: 64px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #82CD48;
    cursor: pointer;
}

.tswitch__knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease;
}

/* перемкнуто на Новий заповіт — кружечок їде вправо */
.tswitch__box.is-nt .tswitch__knob {
    transform: translateX(32px);
}

/* 2K */
@media (min-width: 2560px) {
    .tswitch { gap: 24px; margin-top: 29px; }
    .tswitch__label { font-size: 21px; }
    .tswitch__box { width: 85px; height: 43px; }
    .tswitch__knob { top: 5px; left: 5px; width: 33px; height: 33px; }
    .tswitch__box.is-nt .tswitch__knob { transform: translateX(42px); }
}

/* 4K */
@media (min-width: 3800px) {
    .tswitch { gap: 36px; margin-top: 44px; }
    .tswitch__label { font-size: 32px; }
    .tswitch__box { width: 128px; height: 64px; }
    .tswitch__knob { top: 8px; left: 8px; width: 48px; height: 48px; }
    .tswitch__box.is-nt .tswitch__knob { transform: translateX(64px); }
}

/* телефони: підпис коротший не робимо, лише трохи дрібніший */
@media (max-width: 1150px) {
    /* на телефоні плашки й шапки немає — перемикач звичайним потоком */
    .tswitch { gap: 12px; }
    /* поки відкрита гра, перемикач заповітів зайвий */
body.is-playing .tswitch--over { display: none; }

.tswitch--over { position: static; margin-top: 16px; }
    .tswitch__label { font-size: 14px; }
    .tswitch__box { width: 54px; height: 28px; }
    .tswitch__knob { top: 4px; left: 4px; width: 20px; height: 20px; }
    .tswitch__box.is-nt .tswitch__knob { transform: translateX(26px); }
}

/* ===================== СТОРІНКА ТЕСТІВ (tests.php) ===================== */
/* Розміри картки прив'язані до одного числа --t: база 1920, далі
   медіазапити внизу блоку міняють тільки його. */
.tcard {
    --t: 1;

    width: calc(540px * var(--t));
    max-width: 100%;
    padding: calc(52px * var(--t)) calc(46px * var(--t)) calc(38px * var(--t));
    border-radius: calc(34px * var(--t));
    background: #FFFFFF;
    box-shadow: 0 calc(20px * var(--t)) calc(46px * var(--t)) rgba(170, 135, 60, 0.14);

    display: flex;
    flex-direction: column;
    align-items: center;
}

.tcard__title {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(29px * var(--t));
    color: #4a4a4a;
}

/* перемикач усередині картки — дрібніший за той, що на сторінці ігор */
.tcard .tswitch {
    margin-top: calc(30px * var(--t));
    gap: calc(14px * var(--t));
}

.tcard .tswitch__label { font-size: calc(13px * var(--t)); }

.tcard .tswitch__box {
    width: calc(53px * var(--t));
    height: calc(27px * var(--t));
}

.tcard .tswitch__knob {
    top: calc(4px * var(--t));
    left: calc(4px * var(--t));
    width: calc(19px * var(--t));
    height: calc(19px * var(--t));
}

.tcard .tswitch__box.is-nt .tswitch__knob {
    transform: translateX(calc(26px * var(--t)));
}

/* ---- випадні списки (книга і розділ) ---- */
.tselect {
    position: relative;
    width: calc(277px * var(--t));
    margin-top: calc(24px * var(--t));
}

.tselect__field {
    width: 100%;
    height: calc(67px * var(--t));
    padding: 0 calc(56px * var(--t)) 0 calc(28px * var(--t));
    border: 1px solid #EFEFEF;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 calc(4px * var(--t)) calc(12px * var(--t)) rgba(0, 0, 0, 0.05);

    display: flex;
    align-items: center;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: calc(17px * var(--t));
    color: #6f6f6f;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.tselect__field:hover,
.tselect__field:focus-visible,
.tselect.is-open .tselect__field {
    outline: none;
    border-color: #82CD48;
}

/* довга назва книги не розпирає пігулку */
.tselect__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tselect__arrow {
    position: absolute;
    right: calc(26px * var(--t));
    top: 50%;
    transform: translateY(-50%);
    width: calc(20px * var(--t));
    height: calc(20px * var(--t));
    pointer-events: none;
    transition: transform 0.18s ease;
}

.tselect.is-open .tselect__arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* ---- сама випадайка ---- */
.tselect__list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px * var(--t));
    left: 0;
    width: 100%;
    max-height: calc(250px * var(--t));
    overflow-y: auto;
    overscroll-behavior: contain;

    margin: 0;
    padding: calc(8px * var(--t));
    list-style: none;
    background: #FFFFFF;
    border: 1px solid #EFEFEF;
    border-radius: calc(26px * var(--t));
    box-shadow: 0 calc(16px * var(--t)) calc(34px * var(--t)) rgba(0, 0, 0, 0.13);

    animation: tselect-drop 0.16s ease;
}

@keyframes tselect-drop {
    from { opacity: 0; transform: translateY(calc(-6px * var(--t))); }
    to   { opacity: 1; transform: translateY(0); }
}

.tselect__opt {
    padding: calc(13px * var(--t)) calc(20px * var(--t));
    border-radius: 999px;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: calc(16px * var(--t));
    color: #6f6f6f;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.tselect__opt:hover {
    background: #F1F8E8;
    color: #4a4a4a;
}

.tselect__opt.is-selected {
    background: #82CD48;
    color: #FFFFFF;
}

/* пункт із замочком: розділ ще не пройдений */
.tselect__opt--locked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(10px * var(--t));
    color: #c2c2c2;
    cursor: default;
}

.tselect__opt--locked:hover {
    background: #F7F7F5;
    color: #c2c2c2;
}

.tselect__lock {
    width: calc(14px * var(--t));
    height: calc(14px * var(--t));
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.55;
}
/* тонкий смужок прокрутки в тон сторінці */
.tselect__list::-webkit-scrollbar { width: calc(6px * var(--t)); }
.tselect__list::-webkit-scrollbar-track { background: transparent; }
.tselect__list::-webkit-scrollbar-thumb {
    background: #D8E8C6;
    border-radius: 999px;
}
.tselect__list::-webkit-scrollbar-thumb:hover { background: #B9D79B; }

/* ---- тривалість тесту ---- */
.ttime {
    display: flex;
    gap: calc(14px * var(--t));
    margin-top: calc(34px * var(--t));
}

.ttime__opt {
    min-width: calc(76px * var(--t));
    height: calc(42px * var(--t));
    padding: 0 calc(22px * var(--t));
    border: 1px solid #EFEFEF;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 calc(4px * var(--t)) calc(12px * var(--t)) rgba(0, 0, 0, 0.05);

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 600;
    font-size: calc(15px * var(--t));
    color: #8a8a8a;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ttime__opt.is-active {
    background: #82CD48;
    border-color: #82CD48;
    color: #FFFFFF;
}

/* ---- перемикач «Повтор питань»: звичайний вимикач так/ні ---- */
.trepeat {
    display: flex;
    align-items: center;
    gap: calc(14px * var(--t));
    /* стільки ж, скільки нижній відступ картки, — просвіти згори
       й знизу від перемикача однакові */
    margin-top: calc(38px * var(--t));
}

.trepeat__text {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: calc(15px * var(--t));
    color: #8a8a8a;
}

.trepeat__box {
    position: relative;
    flex-shrink: 0;
    width: calc(53px * var(--t));
    height: calc(27px * var(--t));
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #DCDCDC;                 /* вимкнено */
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.trepeat__box.is-on { background: #82CD48; }

.trepeat__knob {
    position: absolute;
    top: calc(4px * var(--t));
    left: calc(4px * var(--t));
    width: calc(19px * var(--t));
    height: calc(19px * var(--t));
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 calc(2px * var(--t)) calc(5px * var(--t)) rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease;
}

.trepeat__box.is-on .trepeat__knob {
    transform: translateX(calc(26px * var(--t)));
}

/* ---- кнопка старту ---- */
.tstart {
    margin-top: calc(34px * var(--t));
    width: calc(155px * var(--t));
    height: calc(54px * var(--t));
    border: none;
    border-radius: 999px;
    background: #82CD48;
    box-shadow: 0 calc(4px * var(--t)) 0 0 #389238;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(17px * var(--t));
    text-transform: uppercase;
    letter-spacing: calc(0.5px * var(--t));
    color: #FFFFFF;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.tstart:hover { filter: brightness(1.05); }

/* нічого не відкрито — тиснути нема за що */
.tstart:disabled {
    background: #E4E4E0;
    box-shadow: 0 calc(4px * var(--t)) 0 0 #CFCFCB;
    cursor: default;
    filter: none;
}

@media (max-width: 1600px) { .tcard { --t: .83; } }
@media (min-width: 2560px) { .tcard { --t: 1.33; } }
@media (min-width: 3800px) { .tcard { --t: 2; } }

@media (max-width: 1150px) {
    .tcard { --t: .8; width: min(400px, 100%); }
}

/* Ховаємо картку вибору й екран тесту: у них display: flex,
   тож звичайного [hidden] замало */
.tests-main [hidden] { display: none !important; }

/* пояснення під кнопкою старту (коли до книги ще немає питань) */
.tnote {
    margin-top: calc(18px * var(--t, 1));
    max-width: calc(320px * var(--t, 1));
    text-align: center;
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(15px * var(--t, 1));
    line-height: 1.45;
    color: #9a9a9a;
}

/* ===================== САМ ТЕСТ ===================== */
.quiz {
    --q: 1;                                /* масштаб екрана: база 1920 */

    width: calc(754px * var(--q));
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---- верхній рядок: книга зліва, лічильники справа ---- */
.quiz__top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(20px * var(--q));
    margin-bottom: calc(34px * var(--q));
}

.quiz__book {
    display: flex;
    align-items: baseline;
    gap: calc(12px * var(--q));
}

.quiz__icon {
    width: calc(34px * var(--q));
    height: calc(34px * var(--q));
    object-fit: contain;
    align-self: center;
}

.quiz__name {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(31px * var(--q));
    color: #6f6f6f;
}

.quiz__level {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: calc(15px * var(--q));
    color: #b0b0b0;
}

.quiz__scores {
    display: flex;
    gap: calc(14px * var(--q));
}

.qscore {
    display: inline-flex;
    align-items: center;
    gap: calc(10px * var(--q));
    /* висота в півтора раза більша за початкову */
    padding: calc(25px * var(--q)) calc(24px * var(--q));
    border-radius: calc(16px * var(--q));
    background: #FFFFFF;
    box-shadow: 0 calc(6px * var(--q)) calc(16px * var(--q)) rgba(0, 0, 0, 0.06);

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: calc(15px * var(--q));
    color: #9a9a9a;
    white-space: nowrap;
}

.qscore b {
    font-weight: 800;
    color: #6f6f6f;
}

.qscore__ico {
    width: calc(18px * var(--q));
    height: calc(18px * var(--q));
    object-fit: contain;
    display: block;
}

/* ---- картка з питанням ---- */
.quiz__card {
    position: relative;
    width: 100%;
    padding: calc(46px * var(--q)) calc(54px * var(--q)) calc(58px * var(--q));
    border-radius: calc(30px * var(--q));
    background: #FFFFFF;
    box-shadow: 0 calc(18px * var(--q)) calc(40px * var(--q)) rgba(170, 135, 60, 0.12);
}

.quiz__question {
    margin-bottom: calc(30px * var(--q));
    padding: 0 calc(40px * var(--q));
    text-align: center;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: calc(18px * var(--q));
    line-height: 1.45;
    color: #6f6f6f;
}

.quiz__num { font-weight: 800; }

.quiz__answers {
    width: calc(556px * var(--q));
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: calc(12px * var(--q));
}

/* ---- варіант відповіді: кружечок зліва + біла пігулка ---- */
.qans {
    width: 100%;
    display: flex;
    align-items: center;
    gap: calc(16px * var(--q));
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
}

.qans__dot {
    flex-shrink: 0;
    width: calc(20px * var(--q));
    height: calc(20px * var(--q));
    border: calc(2px * var(--q)) solid #DCDCDC;
    border-radius: 50%;
    background: #FFFFFF;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.qans__text {
    flex: 1;
    min-width: 0;
    padding: calc(19px * var(--q)) calc(28px * var(--q));
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 calc(6px * var(--q)) calc(16px * var(--q)) rgba(0, 0, 0, 0.07);

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: calc(16px * var(--q));
    color: #6f6f6f;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.qans:hover .qans__dot { border-color: #82CD48; }
.qans:hover .qans__text { background: #F7FBF3; }

/* коротка підсвітка після відповіді */
.qans.is-right .qans__dot { border-color: #82CD48; background: #82CD48; }
.qans.is-right .qans__text { background: #82CD48; color: #FFFFFF; }

.qans.is-wrong .qans__dot { border-color: #E4573D; background: #E4573D; }
.qans.is-wrong .qans__text { background: #E4573D; color: #FFFFFF; }

/* ---- таймер питання: пігулка на нижньому краї картки ---- */
.quiz__tick {
    position: absolute;
    left: 50%;
    bottom: calc(-26px * var(--q));
    transform: translateX(-50%);

    display: inline-flex;
    align-items: center;
    gap: calc(10px * var(--q));
    min-width: calc(96px * var(--q));
    height: calc(52px * var(--q));
    padding: 0 calc(22px * var(--q));
    justify-content: center;

    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 calc(8px * var(--q)) calc(20px * var(--q)) rgba(0, 0, 0, 0.1);

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(17px * var(--q));
    color: #6f6f6f;
}

.quiz__tick-icon { font-size: calc(16px * var(--q)); }

/* ---- тиха кнопка «Завершити тест» під карткою ---- */
.qexit {
    margin-top: calc(46px * var(--q));
    border: none;
    background: none;
    padding: calc(6px * var(--q));
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(15px * var(--q));
    color: #a5a5a5;
    text-decoration: underline dashed;
    text-underline-offset: calc(4px * var(--q));
    transition: color 0.15s ease;
}

.qexit:hover { color: #6f6f6f; }

/* ---- підсумок: модалка поверх тесту ---- */
.qmodal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(24px * var(--q));
    background: rgba(60, 48, 20, 0.42);
    animation: qmodal-fade 0.2s ease;
}

@keyframes qmodal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.qmodal__card {
    /* .tstart рахує свої розміри від --t (масштаб картки вибору), а всередині
       модалки його немає — прирівнюємо до масштабу тесту, інакше кнопка
       лишається без ширини й висоти */
    --t: var(--q);

    width: calc(430px * var(--q));
    max-width: 100%;
    padding: calc(44px * var(--q)) calc(40px * var(--q)) calc(40px * var(--q));
    border-radius: calc(34px * var(--q));
    background: #FFFFFF;
    box-shadow: 0 calc(26px * var(--q)) calc(60px * var(--q)) rgba(0, 0, 0, 0.28);

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    /* легкий підскок — модалка ніби вистрибує */
    animation: qmodal-pop 0.3s cubic-bezier(0.2, 1.35, 0.45, 1);
}

@keyframes qmodal-pop {
    from { opacity: 0; transform: scale(0.88) translateY(calc(14px * var(--q))); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.qmodal__emoji {
    font-size: calc(54px * var(--q));
    line-height: 1;
    animation: qmodal-emoji 0.6s ease 0.15s both;
}

@keyframes qmodal-emoji {
    0%   { transform: scale(0.4) rotate(-18deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(6deg);  opacity: 1; }
    100% { transform: scale(1) rotate(0);        opacity: 1; }
}

.qmodal__title {
    margin-top: calc(18px * var(--q));
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(27px * var(--q));
    color: #4a4a4a;
}

.qmodal__sub {
    margin-top: calc(8px * var(--q));
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(16px * var(--q));
    color: #a5a5a5;
}

.qmodal__scores {
    margin-top: calc(26px * var(--q));
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--q));
    width: 100%;
}

/* у модалці лічильники на всю ширину, з сірим тлом замість тіні */
.qmodal__scores .qscore {
    justify-content: center;
    background: #F7F7F5;
    box-shadow: none;
}

.qmodal .tstart { margin-top: calc(28px * var(--q)); }

.qmodal__other {
    margin-top: calc(14px * var(--q));
    border: none;
    background: none;
    padding: calc(6px * var(--q));
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(15px * var(--q));
    color: #a5a5a5;
    text-decoration: underline dashed;
    text-underline-offset: calc(4px * var(--q));
    transition: color 0.15s ease;
}

.qmodal__other:hover { color: #6f6f6f; }

/* ---- смужка загального часу: на всю ширину внизу сторінки ---- */
.quiz__bar {
    flex-shrink: 0;
    width: 100%;
    height: 7px;
    background: #EFEFEF;
}

.quiz__bar-fill {
    display: block;
    height: 100%;
    background: #4FA22C;
    transition: width 1s linear;
}

@media (max-width: 1600px) { .quiz { --q: .83; } }
@media (min-width: 2560px) { .quiz { --q: 1.33; } }
@media (min-width: 3800px) { .quiz { --q: 2; } }
@media (max-width: 1150px) { .quiz { --q: .72; } }

/* ===================== РІВНІ НА ПРОЄКТІ (statuses.php) ===================== */
/* Один масштаб --l на весь блок: база 1920, медіазапити внизу міняють
   тільки його. Картки беруться з includes/levels.php. */
/* Жодних перекосів по вертикалі: відступи згори й знизу однакові, тож
   заголовок із картками стоїть рівно посередині між нижньою межею хедера
   і білою смужкою-застереженням унизу. */
.levels-main {
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.levels {
    --l: 1;

    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.levels__title {
    display: flex;
    align-items: center;
    gap: calc(18px * var(--l));
    /* +9 згори і -9 знизу: заголовок опускається, картки лишаються на місці */
    margin-top: calc(9px * var(--l));
    margin-bottom: calc(43px * var(--l));

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(42px * var(--l));
    color: #636363;
    text-align: center;
}

.levels__icon {
    width: calc(52px * var(--l));
    height: calc(52px * var(--l));
    object-fit: contain;
    flex-shrink: 0;
}

/* Літери сидять у своїй рядковій коробці вище за її середину, тож при
   звичайному центруванні напис здається піднятим над іконкою. Опускаємо
   його, щоб оптичні центри збіглися. */
.levels__text {
    transform: translateY(calc(7px * var(--l)));
}

/* Підпис у тому ж рядку, що й заголовок: скільки очок дає один звіт.
   Дрібніший і легший за назву, зсув такий самий, щоб сидіти на одній
   лінії. Число приходить з includes/points.php. */
.levels__note {
    transform: translateY(calc(7px * var(--l)));

    font-weight: 500;
    font-size: calc(22px * var(--l));
    color: #9A9A9A;
    white-space: nowrap;
}

/* ---- як заробити очки ----
   Список під картками рівнів. Скільки в ньому рядків — залежить від
   того, скільки правил увімкнено в includes/points.php, тож верстка
   не розраховує на певну їх кількість. */
.xpways {
    width: 100%;
    max-width: calc(960px * var(--l));
    margin-top: calc(40px * var(--l));
}

.xpways__title {
    margin-bottom: calc(18px * var(--l));

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(24px * var(--l));
    color: #636363;
    text-align: center;
}

.xpways__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(14px * var(--l));
}

.xpway {
    display: flex;
    align-items: center;
    gap: calc(14px * var(--l));

    padding: calc(12px * var(--l)) calc(20px * var(--l));
    border-radius: calc(18px * var(--l));
    background: #FFFFFF;
    box-shadow: 0 calc(3px * var(--l)) 0 0 #E2E2E2;
}

/* число очок — зеленою «пігулкою», як картки рівнів */
.xpway__xp {
    padding: calc(6px * var(--l)) calc(14px * var(--l));
    border-radius: 999px;
    background: linear-gradient(145deg, #8AD45B 0%, #62AD3A 100%);

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(15px * var(--l));
    color: #FFFFFF;
    white-space: nowrap;
}

.xpway__text {
    display: flex;
    flex-direction: column;
    gap: calc(3px * var(--l));
}

.xpway__name {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 700;
    font-size: calc(16px * var(--l));
    color: #5c5c5c;
}

.xpway__note {
    font-weight: 500;
    font-size: calc(13px * var(--l));
    color: #9A9A9A;
}

.levels__grid {
    display: grid;
    grid-template-columns: repeat(3, calc(300px * var(--l)));
    gap: calc(30px * var(--l));
}

/* ---- картка рівня ---- */
.lcard {
    height: calc(145px * var(--l));
    padding: calc(20px * var(--l));
    border-radius: calc(24px * var(--l));

    /* світліше згори-ліворуч, темніше знизу-праворуч, як у макеті */
    background: linear-gradient(145deg, #8AD45B 0%, #62AD3A 100%);
    box-shadow: 0 calc(5px * var(--l)) 0 0 #4C8F2C;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

.lcard__name {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(17px * var(--l));
    color: #FFFFFF;
}

.lcard__stars {
    display: flex;
    gap: calc(7px * var(--l));
}

.lcard__star {
    width: calc(19px * var(--l));
    height: calc(19px * var(--l));
    object-fit: contain;
    display: block;
}

/* зірка, якої на цьому рівні ще немає */
.lcard__star--off {
    filter: grayscale(1) brightness(1.35);
    opacity: 0.5;
}

.lcard__range {
    padding: calc(9px * var(--l)) calc(20px * var(--l));
    border-radius: 999px;
    background: #FFFFFF;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 700;
    font-size: calc(14px * var(--l));
    color: #5c5c5c;
    white-space: nowrap;
}

/* Застереження внизу сторінки — стоїть там, де на інших сторінках
   прогрес-бар, і так само розтягнуте на всю ширину. */
.levels-note {
    width: 100%;
    padding: calc(16px * var(--l, 1)) calc(40px * var(--l, 1));
    background: #FFFFFF;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 500;
    font-size: calc(14px * var(--l, 1));
    line-height: 1.45;
    color: #8C8C8C;
    text-align: center;
}

@media (max-width: 1600px) { .levels { --l: .83; } }
@media (min-width: 2560px) { .levels { --l: 1.33; } }
@media (min-width: 3800px) { .levels { --l: 2; } }

/* телефони й планшети: одна колонка, стрілки під сіткою не потрібні */
@media (max-width: 1150px) {
    .levels { --l: .62; }

    .levels__title { font-size: 26px; margin-bottom: 26px; gap: 10px; }
    .levels__icon { width: 32px; height: 30px; }
    .levels__note { font-size: 14px; }

    .levels__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .lcard { height: auto; padding: 14px; gap: 10px; border-radius: 18px; }
    .lcard__name { font-size: 14px; }
    .lcard__star { width: 15px; height: 15px; }
    .lcard__range { font-size: 12px; padding: 7px 14px; }

    /* на телефоні способи стають стовпчиком */
    .xpways { margin-top: 24px; }
    .xpways__title { font-size: 18px; margin-bottom: 12px; }
    .xpways__list { flex-direction: column; gap: 10px; }
    .xpway { padding: 10px 14px; gap: 10px; border-radius: 14px; }
    .xpway__xp { font-size: 13px; padding: 5px 11px; }
    .xpway__name { font-size: 14px; }
    .xpway__note { font-size: 12px; }

    .levels-note { font-size: 12px; padding: 12px 16px; }
}

/* ===================== АДМІНКА: ПРОПОЗИЦІЇ ТА ІДЕЇ ===================== */
/* Картка однієї пропозиції. Непрочитані підсвічені, щоб наставник
   бачив, що нового, не гортаючи весь список. */
.admin-idea {
    padding: 16px 0;
    border-bottom: 1px solid #F0F0EC;
}

.admin-idea:last-child { border-bottom: none; }

.admin-idea--new {
    margin: 0 -14px;
    padding: 16px 14px;
    border-radius: 14px;
    background: #FBFFF5;
}

.admin-idea__head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* дата — праворуч, решта зліва */
.admin-idea__head .admin-report__date { margin-left: auto; }

.admin-idea__stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.admin-idea__star {
    width: 15px;
    height: 15px;
    object-fit: contain;
    display: block;
}

/* зірка, якої не поставили */
.admin-idea__star--off {
    filter: grayscale(1);
    opacity: 0.3;
}

.admin-idea__stars b {
    margin-left: 6px;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #8a8a8a;
}

.admin-idea__form { margin-top: 10px; }

/* підпис біля заголовка розділу — середня оцінка й кількість */
.admin-section__note {
    margin-left: 10px;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #a5a5a5;
}
/* ===================== ВИДАЛЕННЯ АКАУНТА ===================== */
/* Підтвердження в налаштуваннях і сторінка відновлення. Тон стриманий:
   це не свято, але й не катастрофа — акаунт можна повернути. */
.adel {
    --d: 1;

    position: fixed;
    inset: 0;
    z-index: 650;
    /* flex, а не grid: інакше max-width картки рахується від колонки */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(20px * var(--d));
    overflow-y: auto;

    background: rgba(104, 94, 94, 0.4);
    animation: adel-fade .2s ease;
}

.adel[hidden] { display: none !important; }

@keyframes adel-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.adel__card {
    width: calc(480px * var(--d));
    max-width: 100%;
    padding: calc(44px * var(--d)) calc(44px * var(--d)) calc(34px * var(--d));

    background: #FFFFFF;
    border-radius: calc(32px * var(--d));
    box-shadow: 0 calc(24px * var(--d)) calc(60px * var(--d)) rgba(90, 70, 20, 0.25);

    text-align: center;
    animation: adel-pop .26s cubic-bezier(.2, 1.1, .35, 1);
}

@keyframes adel-pop {
    from { transform: scale(.95); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.adel__title {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(24px * var(--d));
    color: #5c5c5c;
}

.adel__text {
    margin-top: calc(16px * var(--d));
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(15px * var(--d));
    line-height: 1.55;
    color: #8a8a8a;
}

.adel__text b { color: #5c5c5c; }

.adel__input {
    width: 100%;
    margin-top: calc(24px * var(--d));
    height: calc(58px * var(--d));
    padding: 0 calc(24px * var(--d));

    border: calc(2px * var(--d)) solid #F1F1EE;
    border-radius: 999px;
    background: #FBFBF8;
    outline: none;

    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(15px * var(--d));
    color: #5c5c5c;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
}

.adel__input:focus { border-color: #E4B0AD; background: #FFFFFF; }
.adel__input::placeholder { color: #bcbcbc; }

.adel__note {
    margin-top: calc(14px * var(--d));
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(14px * var(--d));
    line-height: 1.4;
    color: #9a9a9a;
}

.adel__note:empty { display: none; }
.adel__note--warn { color: #E25246; }
.adel__note--ok   { color: #59A93C; }

.adel__row {
    margin-top: calc(24px * var(--d));
    display: flex;
    gap: calc(12px * var(--d));
}

.adel__cancel,
.adel__go {
    flex: 1;
    height: calc(56px * var(--d));
    border: none;
    border-radius: 999px;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 700;
    font-size: calc(16px * var(--d));
    cursor: pointer;
    transition: filter .15s ease, background-color .15s ease;
}

/* лишитись — спокійна кнопка, вона ж і безпечніша */
.adel__cancel {
    background: #F2F2EF;
    color: #6f6f6f;
}

.adel__cancel:hover { background: #E9E9E5; }

.adel__go {
    background: #E25246;
    box-shadow: 0 calc(4px * var(--d)) 0 0 #B93A30;
    color: #FFFFFF;
}

.adel__go:hover  { filter: brightness(1.05); }
.adel__go:disabled { opacity: .6; cursor: default; }

/* ---- сторінка відновлення ---- */
.arest {
    --d: 1;

    width: calc(520px * var(--d));
    max-width: calc(100% - 32px);
    padding: calc(52px * var(--d)) calc(48px * var(--d)) calc(40px * var(--d));

    background: #FFFAEF;
    border-radius: calc(40px * var(--d));
    box-shadow: 0 calc(24px * var(--d)) calc(60px * var(--d)) rgba(140, 110, 50, 0.22);

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.arest__title {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(28px * var(--d));
    color: #7C7777;
}

.arest__text {
    margin-top: calc(18px * var(--d));
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(15px * var(--d));
    line-height: 1.55;
    color: #9a9081;
}

.arest__days {
    margin-top: calc(18px * var(--d));
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(16px * var(--d));
    color: #8a8272;
}

.arest__days b { color: #E2913F; font-weight: 800; }

.arest__btn {
    margin-top: calc(28px * var(--d));
    min-width: calc(240px * var(--d));
    height: calc(64px * var(--d));
    border: none;
    border-radius: 999px;
    background: #82CD48;
    box-shadow: 0 calc(5px * var(--d)) 0 0 #389238;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(17px * var(--d));
    color: #FFFFFF;
    cursor: pointer;
    transition: filter .15s ease;
}

.arest__btn:hover { filter: brightness(1.05); }

.arest__exit {
    margin-top: calc(20px * var(--d));
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(13px * var(--d));
    color: #b9b1a0;
    text-decoration: underline;
    text-underline-offset: calc(3px * var(--d));
}

.arest__exit:hover { color: #8a8272; }

@media (max-width: 1600px) { .adel, .arest { --d: .83; } }
@media (min-width: 2560px) { .adel, .arest { --d: 1.33; } }
@media (min-width: 3800px) { .adel, .arest { --d: 2; } }

@media (max-width: 1150px) {
    .adel, .arest { --d: .8; }
    .adel__card { padding: 32px 22px 26px; border-radius: 26px; }
    .arest      { padding: 36px 22px 28px; border-radius: 30px; }
}
/* ===================== ПІДТВЕРДЖЕННЯ ПОШТИ ===================== */
/* Вікно перед новим акаунтом. Шар накриває всю сторінку — саме він і є
   блокуванням: під ним нічого не натиснеш. Затемнення легке, щоб було
   видно, що саме відкриється після підтвердження. */
.econf {
    --e: 1;

    position: fixed;
    inset: 0;
    z-index: 700;
    /* flex, а не grid: інакше max-width картки рахується від колонки */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(20px * var(--e));
    overflow-y: auto;

    /* Затемнення немає зовсім: шар лишається прозорим, але кліки
       все одно впираються в нього — блокування від цього не слабшає. */
    animation: econf-fade .3s ease;
}

@keyframes econf-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.econf__card {
    width: calc(520px * var(--e));
    max-width: 100%;
    padding: calc(52px * var(--e)) calc(52px * var(--e)) calc(40px * var(--e));

    background: #FFFAEF;
    border-radius: calc(40px * var(--e));
    box-shadow: 0 calc(24px * var(--e)) calc(60px * var(--e)) rgba(140, 110, 50, 0.22);

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* струшування: коли тиснуть повз картку */
.econf__card.is-shaking { animation: econf-shake .5s cubic-bezier(.36, .07, .19, .97); }

@keyframes econf-shake {
    10%, 90% { transform: translateX(calc(-2px * var(--e))); }
    20%, 80% { transform: translateX(calc(4px * var(--e))); }
    30%, 50%, 70% { transform: translateX(calc(-8px * var(--e))); }
    40%, 60% { transform: translateX(calc(8px * var(--e))); }
}

.econf__title {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 700;
    font-size: calc(28px * var(--e));
    color: #7C7777;
}

/* поле — як на сторінці входу */
.econf__field {
    width: 100%;
    margin-top: calc(30px * var(--e));
    display: flex;
    align-items: center;
    gap: calc(17px * var(--e));

    background: #fffdf7;
    border: 1px solid rgba(200, 175, 120, 0.35);
    border-radius: 999px;
    padding: calc(26px * var(--e)) calc(28px * var(--e));
}

.econf__field img {
    flex-shrink: 0;
    width: calc(24px * var(--e));
    height: calc(24px * var(--e));
    object-fit: contain;
}

.econf__field input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;

    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(15px * var(--e));
    color: #5c5343;
}

.econf__field input::placeholder { color: #b3a88f; }

.econf__send {
    margin-top: calc(26px * var(--e));
    min-width: calc(210px * var(--e));
    padding: calc(26px * var(--e)) calc(36px * var(--e));
    border: none;
    border-radius: 999px;
    background: #fffdf7;
    box-shadow: 0 calc(8px * var(--e)) calc(20px * var(--e)) rgba(140, 110, 50, 0.14);

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 700;
    font-size: calc(17px * var(--e));
    color: #5c5343;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .12s ease;
}

.econf__send:hover { box-shadow: 0 calc(11px * var(--e)) calc(26px * var(--e)) rgba(140, 110, 50, 0.2); }
.econf__send:active { transform: translateY(calc(2px * var(--e))); }
.econf__send:disabled { opacity: .6; cursor: default; }

.econf__note {
    margin-top: calc(18px * var(--e));
    max-width: calc(360px * var(--e));

    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(14px * var(--e));
    line-height: 1.45;
    color: #9a9a9a;
}

.econf__note:empty { display: none; }

.econf__note--warn { color: #E25246; }
.econf__note--ok   { color: #59A93C; }

/* щоб людина не опинилась замкненою, якщо передумала */
.econf__exit {
    margin-top: calc(22px * var(--e));
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(13px * var(--e));
    color: #b9b1a0;
    text-decoration: underline;
    text-underline-offset: calc(3px * var(--e));
}

.econf__exit:hover { color: #8a8272; }

/* поки не час — шару нема зовсім, сайт натискається як звичайно
   (display: flex вище сам по собі сильніший за hidden) */
.econf[hidden] { display: none; }

/* «Наступного разу» — відстрочка на 36 годин. Навмисне тихіша за
   «Відправити лист»: це не кнопка, а вихід із розмови. */
.econf__later {
    margin-top: calc(22px * var(--e));
    padding: 0;
    border: none;
    background: none;

    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(13px * var(--e));
    color: #b9b1a0;
    cursor: pointer;

    text-decoration: underline dotted;
    text-underline-offset: calc(4px * var(--e));
    text-decoration-thickness: calc(2px * var(--e));
    transition: color .15s ease;
}

.econf__later:hover { color: #8a8272; }


@media (max-width: 1600px) { .econf { --e: .83; } }
@media (min-width: 2560px) { .econf { --e: 1.33; } }
@media (min-width: 3800px) { .econf { --e: 2; } }

@media (max-width: 1150px) {
    .econf { --e: .8; }
    .econf__card { padding: 36px 22px 28px; border-radius: 30px; }
}
/* ===================== НОВИЙ РІВЕНЬ ===================== */
/* Вітальне вікно з конфеті. Тло — світле й напівпрозоре: сторінка
   під ним лишається видимою, це свято, а не перепона. */
.levelup {
    --u: 1;

    position: fixed;
    inset: 0;
    z-index: 400;
    /* flex, а не grid: інакше max-width картки рахується від колонки */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;

    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(2px);
    animation: levelup-fade 0.25s ease;
}

.levelup[hidden] { display: none !important; }

@keyframes levelup-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* полотно з папірцями — на всю ширину, кліки крізь себе пропускає */
.levelup__confetti {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.levelup__card {
    position: relative;
    width: calc(570px * var(--u));
    max-width: calc(100% - 32px);
    padding: calc(64px * var(--u)) calc(48px * var(--u)) calc(58px * var(--u));

    background: #FFFDF7;
    border-radius: calc(52px * var(--u));
    box-shadow: 0 calc(24px * var(--u)) calc(60px * var(--u)) rgba(150, 120, 50, 0.18);

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    animation: levelup-pop 0.34s cubic-bezier(0.2, 1.1, 0.35, 1);
}

@keyframes levelup-pop {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.levelup__emoji {
    font-size: calc(52px * var(--u));
    line-height: 1;
}

.levelup__lead {
    margin-top: calc(30px * var(--u));
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(16px * var(--u));
    color: #9a9a9a;
}

.levelup__name {
    margin-top: calc(22px * var(--u));
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(40px * var(--u));
    color: #636363;
}

.levelup__stars {
    margin-top: calc(20px * var(--u));
    display: flex;
    gap: calc(22px * var(--u));
}

.levelup__star {
    width: calc(27px * var(--u));
    height: calc(27px * var(--u));
    object-fit: contain;
    display: block;
}

/* зірка, якої на цьому рівні ще немає. Освітлювати її, як на зелених
   картках рівнів, тут не можна — на світлому тлі вона б зникла. */
.levelup__star--off {
    filter: grayscale(1);
    opacity: 0.3;
}

.levelup__btn {
    margin-top: calc(44px * var(--u));
    width: calc(173px * var(--u));
    height: calc(66px * var(--u));
    border: none;
    border-radius: 999px;
    background: #82CD48;
    box-shadow: 0 calc(5px * var(--u)) 0 0 #389238;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(19px * var(--u));
    color: #FFFFFF;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.12s ease;
}

.levelup__btn:hover  { filter: brightness(1.05); }
.levelup__btn:active { transform: translateY(calc(2px * var(--u))); }

@media (max-width: 1600px) { .levelup { --u: .83; } }
@media (min-width: 2560px) { .levelup { --u: 1.33; } }
@media (min-width: 3800px) { .levelup { --u: 2; } }

@media (max-width: 1150px) {
    .levelup { --u: .72; }
    .levelup__card { padding: 44px 24px 38px; border-radius: 34px; }
}
/* ===================== РЕЖИМ МОЛИТВИ (повний екран) ===================== */
/* Розміри тут не від бази 1920, як на решті сторінок, а від самого
   екрана (vmin): режим іде на весь дисплей, і свічка має виглядати
   однаково солідно і на ноутбуці, і на великому моніторі. */
.pmode {
    position: fixed;
    inset: 0;
    z-index: 500;

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    /* Матове скло: сторінка позаду вгадується, але не читається —
       інакше її текст свариться з рядком молитви. */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    cursor: pointer;
    animation: pmode-in 0.5s ease;
}

.pmode[hidden] { display: none !important; }

/* у повному екрані позаду шару — тепле полотно, а не чорнота браузера */
.pmode::backdrop { background: #FFF6E3; }

@keyframes pmode-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* тепле світло від свічки, розлите по всьому екрану */
.pmode__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90vmin;
    height: 90vmin;
    transform: translate(-50%, -50%);
    pointer-events: none;

    background: radial-gradient(circle,
        rgba(255, 204, 107, 0.30) 0%,
        rgba(255, 214, 140, 0.14) 38%,
        rgba(255, 235, 190, 0) 68%);
    animation: pmode-breathe 6s ease-in-out infinite;
}

@keyframes pmode-breathe {
    0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}

.pmode__close {
    position: absolute;
    top: 3vmin;
    right: 3vmin;
    width: 5.4vmin;
    height: 5.4vmin;
    min-width: 38px;
    min-height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.pmode__close:hover { background: #FFFFFF; }

.pmode__close svg {
    width: 42%;
    height: 42%;
    min-width: 16px;
    min-height: 16px;
}

.pmode__inner {
    position: relative;
    z-index: 1;
    width: min(86vw, 900px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pmode__lords {
    margin-bottom: 1.4vmin;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: clamp(17px, 2.4vmin, 28px);
    color: #8a8a8a;
}

.pmode__verse {
    max-width: 34em;
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: clamp(13px, 1.7vmin, 19px);
    line-height: 1.6;
    color: #b6ab92;
}

/* ---------- свічка ---------- */

.candle {
    position: relative;
    width: 9vmin;
    min-width: 54px;
    height: 34vmin;
    min-height: 200px;
    margin: 4vmin 0 2vmin;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

/* ореол навколо вогника */
.candle__halo {
    position: absolute;
    left: 50%;
    top: 0;
    width: 26vmin;
    height: 26vmin;
    min-width: 150px;
    min-height: 150px;
    transform: translate(-50%, -38%);
    pointer-events: none;

    background: radial-gradient(circle,
        rgba(255, 196, 80, 0.42) 0%,
        rgba(255, 205, 105, 0.18) 36%,
        rgba(255, 225, 160, 0) 66%);
    animation: halo-pulse 3.2s ease-in-out infinite;
}

@keyframes halo-pulse {
    0%, 100% { opacity: 0.9;  transform: translate(-50%, -38%) scale(1); }
    45%      { opacity: 1;    transform: translate(-50%, -38%) scale(1.09); }
    70%      { opacity: 0.94; transform: translate(-50%, -38%) scale(0.98); }
}

/* вогник: живий, але не смикається — рух дрібний і нерівномірний */
.candle__flame {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 9vmin);
    width: 5vmin;
    min-width: 30px;
    height: 10vmin;
    min-height: 60px;
    transform-origin: 50% 100%;
    filter: drop-shadow(0 0 1.6vmin rgba(255, 170, 50, 0.65));
    animation: flame-dance 2.6s ease-in-out infinite;
}

@keyframes flame-dance {
    0%, 100% { transform: translateX(-50%) scale(1, 1)       rotate(0deg); }
    18%      { transform: translateX(-50%) scale(0.95, 1.06) rotate(-1.8deg); }
    37%      { transform: translateX(-50%) scale(1.05, 0.96) rotate(1.4deg); }
    58%      { transform: translateX(-50%) scale(0.97, 1.04) rotate(-0.8deg); }
    79%      { transform: translateX(-50%) scale(1.03, 0.98) rotate(1deg); }
}

/* внутрішнє ядро дихає окремо — від цього вогонь виглядає живим */
.candle__flame-inner {
    transform-origin: 50% 90%;
    animation: flame-core 1.7s ease-in-out infinite;
}

@keyframes flame-core {
    0%, 100% { opacity: 0.95; transform: scaleY(1); }
    50%      { opacity: 1;    transform: scaleY(0.92); }
}

.candle__wick {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 9vmin);
    width: 0.5vmin;
    min-width: 3px;
    height: 1.6vmin;
    min-height: 9px;
    transform: translate(-50%, 100%);
    border-radius: 999px;
    background: #6b5a44;
}

/* тіло свічки */
.candle__body {
    position: relative;
    width: 100%;
    height: calc(100% - 9vmin);
    border-radius: 1.4vmin 1.4vmin 0.8vmin 0.8vmin;
    background: linear-gradient(90deg,
        #EFE2C6 0%, #FFF8EA 26%, #FFFDF7 46%, #F3E6CC 78%, #E2D2B2 100%);
    box-shadow: inset 0 -2vmin 3vmin rgba(180, 150, 100, 0.16);
}

/* верхня площина з розплавленим воском */
.candle__top {
    position: absolute;
    left: 50%;
    top: 0;
    width: 104%;
    height: 2vmin;
    min-height: 12px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 40%, #FFF6E0 0%, #F0E0C0 70%, #E3D0AC 100%);
}

/* патьок воску збоку — щоб свічка не була пластиковим циліндром */
.candle__drip {
    position: absolute;
    left: 18%;
    top: 1vmin;
    width: 1.6vmin;
    min-width: 9px;
    height: 7vmin;
    min-height: 40px;
    border-radius: 999px;
    background: linear-gradient(180deg, #FFFBF0 0%, #F4E8CE 100%);
    opacity: 0.9;
}

/* ---------- теми молитви ---------- */

.pmode__stage {
    position: relative;
    width: 100%;
    height: 7.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* усі теми лежать одна на одній; видно ту, що має is-on */
.pmode__line {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 22em;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 3.4vmin, 40px);
    line-height: 1.45;
    color: #6a6a6a;

    opacity: 0;
    transform: translateY(1.4vmin);
    transition: opacity 1.1s ease, transform 1.1s ease;
    pointer-events: none;
}

.pmode__line.is-on {
    opacity: 1;
    transform: translateY(0);
}

.pmode__line--amen {
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #82CD48;
}

/* скільки лишилось до наступної теми */
.pmode__bar {
    width: min(280px, 40vmin);
    height: 3px;
    border-radius: 999px;
    background: rgba(150, 135, 100, 0.16);
    overflow: hidden;
}

.pmode__bar-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #FFD36B, #F5B43F);
}

.pmode__dots {
    margin-top: 2.4vmin;
    display: flex;
    gap: 1.2vmin;
}

.pmode__dot {
    width: 1.1vmin;
    height: 1.1vmin;
    min-width: 8px;
    min-height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(150, 135, 100, 0.22);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.pmode__dot.is-past { background: rgba(245, 180, 63, 0.45); }

.pmode__dot.is-on {
    background: #F5B43F;
    transform: scale(1.4);
}

.pmode__hint {
    margin-top: 3vmin;
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: clamp(11px, 1.5vmin, 15px);
    color: #c4bba6;
}

/* сторінка під шаром не гортається */
body.is-praying { overflow: hidden; }

/* кому рух заважає — свічка просто світиться */
@media (prefers-reduced-motion: reduce) {
    .pmode__glow,
    .candle__halo,
    .candle__flame,
    .candle__flame-inner { animation: none; }

    .pmode__line { transition: opacity 0.3s ease; transform: none; }
}

/* на телефоні свічка нижча, щоб текст не зʼїжджав за екран */
@media (max-width: 1150px) {
    /* на вузькому екрані сторінка позаду ближча до тексту — глушимо сильніше */
    .pmode { background: rgba(255, 255, 255, 0.985); }

    /* більший відступ зверху — щоб вірш не торкався вогника */
    .candle { height: 26vmin; min-height: 150px; margin: 9vmin 0 1vmin; }
    .pmode__stage { height: 8.5em; }
    .pmode__line { max-width: 15em; }
}
/* ===================== МОЛИТВА ===================== */
/* Сторінка pray.php: вірш, список тем, кнопка і хрест під нею.
   Розміри — від бази 1920 через --p, як на інших під-сторінках. */
.pray {
    --p: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.pray__verse {
    max-width: calc(600px * var(--p));
    text-align: center;
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(15px * var(--p));
    line-height: 1.5;
    color: #8a8a8a;
}

.pray__list {
    margin-top: calc(60px * var(--p));
    width: calc(635px * var(--p));
    max-width: 100%;
    list-style: none;

    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--p));
}

/* рядок теми: номер окремою карткою, текст — своєю */
.pray-item {
    display: flex;
    align-items: stretch;
    gap: calc(6px * var(--p));
}

.pray-item__num,
.pray-item__text {
    background: #FFFFFF;
    border-radius: calc(14px * var(--p));
    box-shadow: 0 calc(4px * var(--p)) calc(12px * var(--p)) rgba(170, 135, 60, 0.10);
}

.pray-item__num {
    flex-shrink: 0;
    width: calc(76px * var(--p));
    height: calc(72px * var(--p));
    display: grid;
    place-items: center;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(18px * var(--p));
    color: #6e6e6e;
}

.pray-item__text {
    flex: 1;
    min-width: 0;
    padding: 0 calc(26px * var(--p));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10px * var(--p));

    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(16px * var(--p));
    line-height: 1.35;
    text-align: center;
    color: #5c5c5c;
}

/* картинка замість емодзі (прапор, пташка) */
.pray-item__pic {
    flex-shrink: 0;
    width: calc(var(--pic, 21px) * var(--p));   /* --pic задає тема, якщо треба інакше */
    height: auto;
    object-fit: contain;
}

.pray-item__emoji {
    flex-shrink: 0;
    font-size: calc(17px * var(--p));
    line-height: 1;
}

.pray__start {
    margin-top: calc(60px * var(--p));
    width: calc(257px * var(--p));
    height: calc(70px * var(--p));
    border: none;
    border-radius: 999px;
    background: #82CD48;
    box-shadow: 0 calc(5px * var(--p)) 0 0 #389238;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(17px * var(--p));
    text-transform: uppercase;
    letter-spacing: calc(0.5px * var(--p));
    color: #FFFFFF;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.pray__start:hover { filter: brightness(1.05); }

.pray__cross {
    margin-top: calc(74px * var(--p));
    width: calc(53px * var(--p));
    height: auto;
}

@media (max-width: 1600px) { .pray { --p: .83; } }
@media (min-width: 2560px) { .pray { --p: 1.33; } }
@media (min-width: 3800px) { .pray { --p: 2; } }

/* телефони: номер меншим квадратом, текст ліворуч, хрест дрібніший */
@media (max-width: 1150px) {
    .pray { --p: .8; width: 100%; }

    .pray-main { padding: 0 16px; }

    .pray__list { margin-top: 26px; width: 100%; }

    .pray-item__num { width: 46px; height: 62px; font-size: 16px; }

    .pray-item__text {
        padding: 0 16px;
        justify-content: flex-start;
        text-align: left;
        font-size: 14px;
    }

    .pray__start { margin-top: 30px; }
    .pray__cross { margin-top: 34px; }
}
/* ===================== ВАШІ ПРОПОЗИЦІЇ / ІДЕЇ ===================== */
/* Модалка, що виїжджає знизу. Висота панелі — 300px на базі 1920,
   далі масштабується разом із --s2. Поки без бекенду: форма нічого
   не надсилає, кнопка чесно про це каже. */
.sheet {
    --s2: 1;

    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: flex-end;
    background: rgba(60, 48, 20, 0.4);
    backdrop-filter: blur(2px);
    animation: sheet-fade 0.22s ease;
}

.sheet[hidden] { display: none !important; }

@keyframes sheet-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sheet__panel {
    position: relative;
    width: 100%;
    height: calc(300px * var(--s2));
    padding: calc(16px * var(--s2)) calc(40px * var(--s2)) calc(24px * var(--s2));

    /* донизу ледь тепліє — панель не виглядає пласким прямокутником */
    background: linear-gradient(180deg, #FFFFFF 60%, #FFFCF4 100%);
    border-radius: calc(30px * var(--s2)) calc(30px * var(--s2)) 0 0;
    box-shadow: 0 calc(-12px * var(--s2)) calc(44px * var(--s2)) rgba(0, 0, 0, 0.18);

    animation: sheet-up 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* тонка зелена смужка по верхньому краю — акцент у тон проєкту */
.sheet__panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(4px * var(--s2));
    border-radius: calc(30px * var(--s2)) calc(30px * var(--s2)) 0 0;
    background: linear-gradient(90deg, #90E658, #7DC44E, #82CD48);
}

@keyframes sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* смужка-ручка, як у мобільних шторок */
.sheet__handle {
    display: block;
    width: calc(52px * var(--s2));
    height: calc(5px * var(--s2));
    margin: 0 auto calc(12px * var(--s2));
    border-radius: 999px;
    background: #E4E4E0;
}

.sheet__close {
    position: absolute;
    top: calc(18px * var(--s2));
    right: calc(24px * var(--s2));
    width: calc(36px * var(--s2));
    height: calc(36px * var(--s2));
    border: none;
    border-radius: 50%;
    background: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sheet__close:hover { background: #F3F3F1; }

.sheet__close svg {
    width: calc(18px * var(--s2));
    height: calc(18px * var(--s2));
}

/* вміст не розтягується на весь монітор */
.sheet__inner {
    width: 100%;
    max-width: calc(1120px * var(--s2));
    height: calc(100% - 17px * var(--s2));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* ---- шапка: значок і заголовки ---- */
.sheet__head {
    display: flex;
    align-items: center;
    gap: calc(16px * var(--s2));
}

.sheet__badge {
    flex-shrink: 0;
    width: calc(52px * var(--s2));
    height: calc(52px * var(--s2));
    border-radius: 50%;
    background: #FFF4D6;
    display: grid;
    place-items: center;
}

.sheet__badge svg {
    width: calc(26px * var(--s2));
    height: calc(29px * var(--s2));
}

.sheet__title {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(23px * var(--s2));
    color: #5c5c5c;
}

.sheet__lead {
    margin-top: calc(3px * var(--s2));
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(14px * var(--s2));
    color: #b0b0b0;
}

/* ---- дві колонки: текст і оцінка ---- */
.sheet__body {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: calc(34px * var(--s2));
    margin-top: calc(16px * var(--s2));
}

.sheet__col {
    display: flex;
    flex-direction: column;
}

.sheet__col--text {
    position: relative;
    flex: 1;
    min-width: 0;
}

.sheet__col--rate {
    width: calc(250px * var(--s2));
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
}

.sheet__area {
    flex: 1;
    width: 100%;
    padding: calc(16px * var(--s2)) calc(20px * var(--s2)) calc(30px * var(--s2));
    border: calc(2px * var(--s2)) solid #F1F1EE;
    border-radius: calc(22px * var(--s2));
    background: #FBFBF8;
    resize: none;

    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(15px * var(--s2));
    line-height: 1.5;
    color: #5c5c5c;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sheet__area::placeholder { color: #bcbcbc; }

.sheet__area:focus {
    outline: none;
    border-color: #A8DD7E;
    background: #FFFFFF;
}

/* лічильник у нижньому куті поля — під нього лишено відступ */
.sheet__counter {
    position: absolute;
    right: calc(18px * var(--s2));
    bottom: calc(11px * var(--s2));

    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(12px * var(--s2));
    color: #c2c2c2;
    pointer-events: none;
}

.sheet__counter b { font-weight: 700; color: #8a8a8a; }

.sheet__label {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 600;
    font-size: calc(15px * var(--s2));
    color: #8a8a8a;
}

/* ---- оцінка п'ятьма зірками ---- */
.rate {
    display: flex;
    gap: calc(9px * var(--s2));
}

.rate__star {
    border: none;
    background: none;
    padding: calc(2px * var(--s2));
    cursor: pointer;
    line-height: 0;
}

.rate__star img {
    width: calc(32px * var(--s2));
    height: calc(32px * var(--s2));
    object-fit: contain;
    display: block;
    /* незапалена зірка: просто сіра. Освітлювати її, як на зелених
       картках рівнів, тут не можна — на білому вона зникає. */
    filter: grayscale(1);
    opacity: 0.28;
    transition: filter 0.14s ease, opacity 0.14s ease, transform 0.14s ease;
}

.rate__star.is-on img {
    filter: none;
    opacity: 1;
    transform: scale(1.08);
}

/* слово під зірками — щоб оцінка не була німою */
.rate__word {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 700;
    font-size: calc(14px * var(--s2));
    color: #E0A940;
    min-height: calc(18px * var(--s2));
}

/* ---- кнопка ---- */
.sheet__send {
    width: 100%;
    height: calc(52px * var(--s2));
    border: none;
    border-radius: 999px;
    background: linear-gradient(180deg, #8FD658 0%, #79C243 100%);
    box-shadow: 0 calc(4px * var(--s2)) 0 0 #389238;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(10px * var(--s2));

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 800;
    font-size: calc(16px * var(--s2));
    text-transform: uppercase;
    letter-spacing: calc(0.5px * var(--s2));
    color: #FFFFFF;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.12s ease;
}

.sheet__send svg {
    width: calc(20px * var(--s2));
    height: calc(20px * var(--s2));
    transition: transform 0.15s ease;
}

.sheet__send:hover { filter: brightness(1.05); }
.sheet__send:hover svg { transform: translateX(calc(3px * var(--s2))); }
.sheet__send:active { transform: translateY(calc(2px * var(--s2))); }

/* порожнє поле — надсилати нічого */
.sheet__send:disabled {
    background: #E4E4E0;
    box-shadow: 0 calc(4px * var(--s2)) 0 0 #CFCFCB;
    cursor: default;
    filter: none;
}

.sheet__send:disabled svg { transform: none; }

.sheet__note {
    margin-top: calc(7px * var(--s2));
    text-align: center;
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(12px * var(--s2));
    line-height: 1.35;
    color: #b5b5b5;
}

@media (max-width: 1600px) { .sheet { --s2: .83; } }
@media (min-width: 2560px) { .sheet { --s2: 1.33; } }
@media (min-width: 3800px) { .sheet { --s2: 2; } }

/* телефони: одна колонка, панель тягнеться під вміст */
@media (max-width: 1150px) {
    .sheet { --s2: .8; }

    .sheet__panel { height: auto; max-height: 88vh; padding: 12px 18px 20px; }
    .sheet__inner { height: auto; }

    .sheet__head { gap: 12px; }
    .sheet__badge { width: 42px; height: 42px; }
    .sheet__title { font-size: 18px; }
    .sheet__lead { font-size: 13px; }

    .sheet__body { flex-direction: column; gap: 14px; }

    .sheet__col--rate { width: 100%; gap: 10px; }
    .sheet__area { height: 110px; flex: none; }
}
/* глава, до якої ігор ще немає */
.games-soon {
    width: 100%;
    text-align: center;
    padding: 40px 20px;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: #8a8a8a;
}

@media (max-width: 1150px) {
    .ghub__label { font-size: 17px; }
    #ghubNT .ghub__label { margin-top: 14px; }
}
/* ===================== АДМІН-ПАНЕЛЬ НА ТЕЛЕФОНІ ===================== */
/* Десктопна адмінка зверстана під широку колонку: таблиця активності,
   форма сповіщення в один рядок, кнопки збоку. На 375px це все їхало
   за екран. Тут та сама розмітка перекладена мовою мобільного інтерфейсу:
   світло-сірі картки з радіусом 24, поля на всю ширину, кнопки під ними. */
@media (max-width: 1150px) {

    /* Решта підсторінок на телефоні не гортається: body тримає рівно
       висоту екрана. Адмінка довга, тож саме їй повертаємо звичайну
       прокрутку сторінки — і тільки їй, щоб не зачепити інші. */
    body:has(.admin) {
        height: auto;
        min-height: 100dvh;
        overflow: auto;
    }

    body:has(.admin) .main--top {
        display: block;
        overflow: visible;
        padding: 0 0 40px;
    }

    /* Приймання звітів і розсилка сповіщень — лише з компʼютера:
       там довгі форми з коментарем, які на телефоні незручні. */
    #reports,
    #notify {
        display: none;
    }

    .admin {
        width: auto;
        margin: 0;
        padding: 0 16px 40px;
        gap: 26px;
    }

    .admin-section__title {
        font-size: 17px;
        padding-left: 4px;
    }

    .admin-section__note {
        display: block;
        margin: 4px 0 0 0;
        font-size: 12px;
    }

    /* картка розділу — як картки завдань на головній */
    .admin-card {
        padding: 16px;
        border-radius: 24px;
        background: #F7F7F7;
        border: 1px solid rgba(202, 202, 201, 0.46);
        box-shadow: none;
    }

    .admin-empty { font-size: 14px; }

    /* ---- звіт ---- */
    .admin-report {
        padding: 14px 0;
    }

    .admin-report__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .admin-report__user { font-size: 15px; }
    .admin-report__date { font-size: 12px; }

    .admin-report__checks { gap: 6px; }

    .admin-chip {
        font-size: 12px;
        padding: 5px 10px;
    }

    .admin-report__note {
        font-size: 14px;
        padding: 10px 12px;
        border-radius: 16px;
    }

    /* поле коментаря і кнопки — стовпчиком, кожне на всю ширину */
    .admin-report__form {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .admin-report__form .btn-green,
    .admin-report__form .btn-red {
        width: 100%;
        height: 48px;
    }

    /* ---- сповіщення ---- */
    .admin-notify {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        position: relative;
    }

    .admin-select,
    .admin-input {
        width: 100%;
        min-width: 0;
        height: 48px;
        border-radius: 999px;
        font-size: 14px;
    }

    .admin-notify .btn-green {
        width: 100%;
        height: 48px;
    }

    /* смайлик стає кружечком у кутку поля, а не окремою кнопкою в рядку */
    .admin-emoji {
        position: absolute;
        right: 10px;
        top: 60px;                 /* навпроти поля тексту */
        width: 34px;
        height: 34px;
    }

    .emoji-picker {
        left: 0;
        right: 0;
        width: auto;
    }

    /* ---- пропозиції ---- */
    .admin-idea__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .admin-idea__head .admin-report__date { margin-left: 0; }

    .admin-idea__form .btn-green {
        width: 100%;
        height: 44px;
    }

    /* ---- активність: замість таблиці — список рядків ---- */
    .admin-activity,
    .admin-activity tbody,
    .admin-activity tr,
    .admin-activity td {
        display: block;
        width: 100%;
    }

    /* шапку таблиці ховаємо: у списку вона ні до чого */
    .admin-activity tr:first-child { display: none; }

    .admin-activity tr {
        padding: 12px 14px;
        margin-bottom: 8px;
        background: #FFFFFF;
        border: 1px solid rgba(202, 202, 201, 0.46);
        border-radius: 18px;
    }

    .admin-activity td {
        border: none;
        padding: 0;
        font-size: 14px;
    }

    /* перший рядок — логін, наступні дрібніші й сірі */
    .admin-activity td:first-child {
        font-weight: 700;
        color: #5c5c5c;
        margin-bottom: 2px;
    }

    .admin-activity td:not(:first-child) {
        font-size: 12px;
        color: #9a9a9a;
    }

    /* дату реєстрації підписуємо, бо без шапки незрозуміло, що це */
    .admin-activity td:last-child::before {
        content: 'з ';
        color: #b5b5b5;
    }
}

/* ===================== ЕКСКУРСІЯ ПО ПРОЄКТУ ===================== */
/* Кнопка-кружечок унизу справа на головній і сама екскурсія: затемнення
   з вирізом, зелене кільце навколо того, про що йдеться, і підказка.
   Розмітка — includes/tour.php, дорога й кроки — js/tour.js. */

.tour-fab, .tour, .tour-resume { --t: 1; }

/* ---------- кнопка «Екскурсія по проекту» ---------- */
.tour-fab {
    position: fixed;
    right: calc(150px * var(--t));
    bottom: calc(110px * var(--t));
    z-index: 120;

    width: calc(152px * var(--t));
    height: calc(152px * var(--t));

    /* виліт знизу: злітає вгору й трохи перелітає — як кулька */
    animation: tour-fab-fly 1s cubic-bezier(.2, .8, .3, 1.25) .7s both;
}

/* сама кнопка — на всю площу кружечка */
.tour-fab__btn {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

/* Хрестик: показується при наведенні й прибирає кнопку назовсім.
   Стоїть у кутку квадрата — поза німбом, щоб не затуляв малюнок. */
.tour-fab__close {
    position: absolute;
    top: calc(6px * var(--t));
    right: calc(6px * var(--t));

    width: calc(28px * var(--t));
    height: calc(28px * var(--t));
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 calc(4px * var(--t)) calc(12px * var(--t)) rgba(140, 110, 50, 0.25);

    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(18px * var(--t));
    line-height: 1;
    color: #b9b1a0;
    cursor: pointer;

    opacity: 0;
    transform: scale(.7);
    transition: opacity .15s ease, transform .15s ease, color .15s ease;
}

.tour-fab:hover .tour-fab__close,
.tour-fab:focus-within .tour-fab__close {
    opacity: 1;
    transform: none;
}

.tour-fab__close:hover { color: #E25246; }

@keyframes tour-fab-fly {
    from { transform: translateY(calc(260px * var(--t))) scale(.4); opacity: 0; }
    60%  { opacity: 1; }
    to   { transform: none; opacity: 1; }
}

/* поки екскурсія триває, кнопка ховається: замість неї — «Продовжити» */
.tour-fab[hidden] { display: none; }

/* бліде коло — німб навколо кнопки, тихо дихає */
.tour-fab__halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.62);
    animation: tour-halo 3s ease-in-out 1.7s infinite;
}

@keyframes tour-halo {
    0%, 100% { transform: scale(1);    opacity: .62; }
    50%      { transform: scale(1.07); opacity: .95; }
}

/* біле коло — власне кнопка */
.tour-fab__body {
    position: relative;
    width: calc(114px * var(--t));
    height: calc(114px * var(--t));
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 calc(10px * var(--t)) calc(26px * var(--t)) rgba(140, 110, 50, 0.18);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(5px * var(--t));

    animation: tour-float 3.6s ease-in-out 1.7s infinite;
    transition: box-shadow .18s ease;
}

@keyframes tour-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(calc(-7px * var(--t))); }
}

.tour-fab:hover .tour-fab__body {
    box-shadow: 0 calc(16px * var(--t)) calc(34px * var(--t)) rgba(140, 110, 50, 0.28);
}

.tour-fab__icon {
    width: calc(40px * var(--t));
    height: calc(40px * var(--t));
    object-fit: contain;
}

.tour-fab__text {
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 700;
    font-size: calc(11px * var(--t));
    line-height: 1.25;
    color: #7C7777;
    text-align: center;
}

/* Поки екскурсія розповідає про ромашку, вона стоїть спокійно: інакше
   її дихання ходить разом із підсвіткою навколо. Зупиняємо саме дихання
   (друга анімація), а не появу — інакше квітка виростала б наново. */
.daisy.tour-still { animation-play-state: running, paused; }

/* ---------- затемнення з вирізом ---------- */
/* Сам шар кліків не ловить — інакше він накрив би й виріз. Ловлять
   тільки шторки, заслінка й підказка. */
.tour { position: fixed; inset: 0; z-index: 800; pointer-events: none; }
.tour[hidden] { display: none; }

.tour__panel, .tour__hole, .tour__bubble { pointer-events: auto; }

/* Затемнення з вирізами. Малюємо маскою, а не шторками: так виріз може
   бути заокругленим, круглим (ромашка) або складатись із кількох шматків
   (дві смужки прогрес-бару). Кліки крізь нього проходять — їх тримають
   шторки. */
.tour__dim {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Шторки лишились заради кліків: затемнення малює тінь вирізу */
.tour__panel { position: fixed; }

/* Плавно рухаємось тільки при зміні кроку (клас вішає js на пів секунди).
   Решту часу підсвітка стежить за ціллю щокадру — ромашка дихає, меню
   випадає, — і будь-який перехід тут лише відставав би. */
.tour--move .tour__panel,
.tour--move .tour__bubble {
    transition: top .38s cubic-bezier(.4, 0, .2, 1), left .38s cubic-bezier(.4, 0, .2, 1),
                width .38s cubic-bezier(.4, 0, .2, 1), height .38s cubic-bezier(.4, 0, .2, 1);
}

/* вирізи переїжджають так само плавно — там, де браузер уміє анімувати
   контур; де ні, вони просто перестрибують */
.tour--move .tour__dim path {
    transition: d .38s cubic-bezier(.4, 0, .2, 1);
}

/* Білий двійник підпису зі сторінки — щоб його було видно в затемненні.
   Шрифт і місце беремо з самого підпису, тут лише колір. */
.tour__label {
    position: fixed;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    white-space: nowrap;
}

.tour__label[hidden] { display: none; }

/* Копії шматочків сторінки, які мають лишитись видимими поверх
   затемнення (кулька вдячності). Кліків не ловлять — під ними жива
   сторінка. */
.tour__over > * {
    position: fixed;
    pointer-events: none;
    margin: 0;
}

/* прозора заслінка на вирізі — щоб на кроках-розповідях не клікнули зайвого */
.tour__hole { position: fixed; }
.tour__hole[hidden] { display: none; }

/* ---------- сама підказка ---------- */
.tour__bubble {
    position: fixed;
    z-index: 2;
    width: calc(380px * var(--t));
    max-width: calc(100vw - 32px);
    padding: calc(26px * var(--t)) calc(30px * var(--t)) calc(22px * var(--t));

    background: #FFFAEF;
    border-radius: calc(30px * var(--t));
    box-shadow: 0 calc(22px * var(--t)) calc(54px * var(--t)) rgba(50, 40, 20, 0.4);
}

/* хвостик — дивиться на те, що підсвічено; з якого боку картка стоїть,
   з того боку він і виростає */
.tour__bubble::after {
    content: '';
    position: absolute;
    width: calc(18px * var(--t));
    height: calc(18px * var(--t));
    background: #FFFAEF;
    transform: rotate(45deg);
    border-radius: calc(4px * var(--t));
}

.tour__bubble--down::after  { top: calc(-7px * var(--t));    left: var(--arrow, 50%); margin-left: calc(-9px * var(--t)); }
.tour__bubble--up::after    { bottom: calc(-7px * var(--t)); left: var(--arrow, 50%); margin-left: calc(-9px * var(--t)); }
.tour__bubble--right::after { left: calc(-7px * var(--t));   top: var(--arrow, 50%);  margin-top: calc(-9px * var(--t)); }
.tour__bubble--left::after  { right: calc(-7px * var(--t));  top: var(--arrow, 50%);  margin-top: calc(-9px * var(--t)); }
.tour__bubble--none::after  { display: none; }

.tour__step {
    display: block;
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 700;
    font-size: calc(12px * var(--t));
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9BCB6B;
}

.tour__step:empty { display: none; }

.tour__title {
    margin-top: calc(8px * var(--t));
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 700;
    font-size: calc(21px * var(--t));
    line-height: 1.25;
    color: #5c5343;
}

.tour__text {
    margin-top: calc(10px * var(--t));
    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(15px * var(--t));
    line-height: 1.5;
    color: #8a8272;
}

/* коли крок чекає дії — замість кнопки блимає підказка */
.tour__hint {
    margin-top: calc(14px * var(--t));
    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 700;
    font-size: calc(14px * var(--t));
    color: #63A83C;
    animation: tour-hint 1.6s ease-in-out infinite;
}

@keyframes tour-hint {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

.tour__row {
    margin-top: calc(18px * var(--t));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(14px * var(--t));
}

.tour__skip {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-size: calc(13px * var(--t));
    color: #b9b1a0;
    text-decoration: underline dotted;
    text-underline-offset: calc(4px * var(--t));
    transition: color .15s ease;
}

.tour__skip:hover { color: #8a8272; }

.tour__next {
    padding: calc(14px * var(--t)) calc(30px * var(--t));
    border-radius: calc(30px * var(--t));
    font-size: calc(14px * var(--t));
}

.tour__next[hidden] { display: none; }

/* ---------- «Продовжити екскурсію» ---------- */
/* Людина зійшла з дороги — кличемо назад, але тихо, збоку. */
.tour-resume {
    position: fixed;
    right: calc(28px * var(--t));
    bottom: calc(96px * var(--t));
    z-index: 120;

    display: flex;
    align-items: center;
    gap: calc(10px * var(--t));
    padding: calc(12px * var(--t)) calc(20px * var(--t));

    border: none;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 calc(10px * var(--t)) calc(26px * var(--t)) rgba(140, 110, 50, 0.22);
    cursor: pointer;

    font-family: 'TT Rounds Neue', sans-serif;
    font-weight: 700;
    font-size: calc(13px * var(--t));
    color: #5c5343;

    animation: tour-fab-fly .7s cubic-bezier(.2, .8, .3, 1.25) both;
}

.tour-resume[hidden] { display: none; }
.tour-resume img { width: calc(26px * var(--t)); height: calc(26px * var(--t)); object-fit: contain; }

@media (max-width: 1600px) { .tour-fab, .tour, .tour-resume { --t: .83; } }
@media (min-width: 2560px) { .tour-fab, .tour, .tour-resume { --t: 1.33; } }
@media (min-width: 3800px) { .tour-fab, .tour, .tour-resume { --t: 2; } }

/* На телефонах і планшетах екскурсії немає: вона водить по десктопній
   ромашці, а тут зовсім інша головна. */
@media (max-width: 1150px) {
    .tour-fab, .tour, .tour-resume { display: none !important; }
}

/* ===================== ДОКУМЕНТИ (політика, умови) ===================== */
/* Дві сторінки, які відкриваються і без входу. Тут тільки текст, тож
   усе зроблено заради читання: вузька колонка, спокійний фон, великий
   міжрядковий інтервал. */

/* Головні сторінки сайту живуть рівно в екран і не прокручуються
   (див. body вище). Тут навпаки — текст довгий, тож повертаємо
   звичайну сторінку з прокруткою. */
.legal-page {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow: visible;
    background: #FDF6E3;
}

.legal-top {
    display: flex;
    justify-content: center;
    padding: 28px 20px 0;
}

.legal-top__logo img {
    width: 132px;
    height: auto;
    display: block;
}

.legal {
    width: min(760px, 100%);
    margin: 0 auto;
    padding: 34px 24px 70px;

    font-family: 'TT Rounds Neue', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #5c5343;
}

.legal__title {
    font-weight: 700;
    font-size: 30px;
    line-height: 1.25;
    color: #4a4234;
    text-align: center;
}

.legal__lead {
    margin-top: 18px;
    padding: 18px 22px;
    background: #FFFAEF;
    border-radius: 22px;
    color: #6b6151;
}

.legal h2 {
    margin-top: 34px;
    font-weight: 700;
    font-size: 19px;
    color: #63A83C;
}

.legal p  { margin-top: 12px; }
.legal ul { margin-top: 12px; padding-left: 22px; }
.legal li { margin-top: 7px; }

.legal b { font-weight: 800; color: #4a4234; }

.legal a {
    color: #58A82F;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal a:hover { color: #3f8020; }

.legal__date {
    margin-top: 40px;
    padding-top: 18px;
    border-top: 1px solid rgba(140, 110, 50, 0.18);
    font-size: 14px;
    color: #9a9a9a;
}

.legal__nav {
    margin-top: 18px;
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 14px;
}

@media (min-width: 2560px) {
    .legal { width: min(1000px, 100%); font-size: 21px; }
    .legal__title { font-size: 40px; }
    .legal h2 { font-size: 25px; }
    .legal-top__logo img { width: 176px; }
}

@media (max-width: 700px) {
    .legal { padding: 24px 18px 56px; font-size: 15px; }
    .legal__title { font-size: 24px; }
    .legal h2 { font-size: 17px; margin-top: 28px; }
}

/* Стан пошти в налаштуваннях росте разом з полем. Стоїть у кінці файлу
   навмисно: базові правила .settings-mail лежать нижче за медіазапити
   вище, і без цього вони б їх перебивали. */
@media (min-width: 2560px) {
    /* стан пошти під полем Email */
    .settings-mail { margin-top: 11px; gap: 19px; }
    .settings-mail__link { font-size: 17px; text-underline-offset: 5px; }
    .settings-mail__pending { margin-top: 11px; gap: 13px; font-size: 17px; }
    .settings-mail__send { padding: 12px 27px; font-size: 17px; }
    .settings-mail__note { margin-top: 11px; font-size: 17px; }
    .settings-mail-ok { right: 21px; }
    .settings-mail-ok svg { width: 24px; height: 24px; }
    .settings-input-wrap:has(.settings-mail-ok) .settings-input { padding-right: 61px; }
}

@media (min-width: 3800px) {
    /* стан пошти під полем Email */
    .settings-mail { margin-top: 16px; gap: 28px; }
    .settings-mail__link { font-size: 26px; text-underline-offset: 8px; }
    .settings-mail__pending { margin-top: 16px; gap: 20px; font-size: 26px; }
    .settings-mail__send { padding: 18px 40px; font-size: 26px; }
    .settings-mail__note { margin-top: 16px; font-size: 26px; }
    .settings-mail-ok { right: 32px; }
    .settings-mail-ok svg { width: 36px; height: 36px; }
    .settings-input-wrap:has(.settings-mail-ok) .settings-input { padding-right: 92px; }
}