/* index.php */

/* 1. Глобальные настройки страницы */
html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

body { 
    font-family: 'Segoe UI', sans-serif; 
    
	font-size: 20px;
	margin: 0; /* Убирает отступ сверху и по бокам */
    padding: 0; 
    
    color: #333; 
    background-attachment: fixed;
     



/* Установить фоновый рисунок для всего сайта */

    /* ЗАМЕНИ ЭТУ ССЫЛКУ на правильный путь к твоему файлу! */
    background-image: url('https://habbu.ee/images/habbu-bg.png');

    /* Убедиться, что фон не повторяется */
    background-repeat: no-repeat;

    /* Центрировать фон по горизонтали и вертикали */
    background-position: center bottom;

    /* Сделать фон фиксированным, чтобы он не прокручивался */
    background-attachment: fixed;

    /* Убедиться, что фон всегда покрывает весь экран, не растягиваясь */
    background-size: cover;

    /* Цвет фона, если картинка не загрузится (синий) */
    background-color: #0c3d97;background: /* Светло-голубой фон Habbo за пределами сайта  #D9EAF2; */
}

/* На телефонах: разместить фон по центру */
 /* @media (max-width: 768px) {
    body {
        background-position: center;
    }
}*/




/* Konteiner, kus asub täpp ja tekst */
.online-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: #ffffff;
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.08); /* Läbikumav taust */
    border-radius: 25px;
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Roheline vilkuv täpp */
.online-dot {
    width: 10px;
    height: 10px;
    background-color: #2ecc71; /* Klassikaline roheline */
    border-radius: 50%;
    box-shadow: 0 0 8px #2ecc71;
    animation: pulse-green 2s infinite;
}

/* Täpi pulseerimise animatsioon */
@keyframes pulse-green {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(46, 204, 113, 0);
    }
    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

/* Sinu uus unikaalne klass admini lingi jaoks */
.menu-itemonline {
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    margin-left: 15px;
    padding: 4px 10px;
    border: 1px dashed #e94560; /* Tee see punktiiriga, et eristuks */
    border-radius: 5px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.menu-itemonline:hover {
    background-color: #e94560;
    color: #ffffff !important; /* Muudab teksti valgeks, kui peale minna */
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.4);
    transform: translateY(-1px);
}





/* register.php */

 .reg-card { 
            font-family: 'Verdana', sans-serif; 
            background: #1d4b6d; 
            max-width: 400px;
			display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
            margin: 0; 
            color: white;    
            border: 2px solid #14324a;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
			text-align: center;
			} 
  

 /* .reg-card { 
            background: #1d4b6d;#173d59; 
            padding: 40px; 
            border-radius: 4px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
            width: 100%; 
            max-width: 400px; 
            border: 2px solid #14324a;
            text-align: center;
        	} */
      
	  h2 { color: #f1c40f; text-transform: uppercase; letter-spacing: -1px; margin-bottom: 25px; }
        input { 
            width: 100%; 
            padding: 12px; 
            margin: 8px 0; 
            border: 2px solid #14324a; 
            border-radius: 4px; 
            box-sizing: border-box; 
            background: #1d4b6d; 
            color: white;
        }
        input::placeholder { color: #8da7b8; }
        .btn-habbu { 
            background: #e94560; 
            color: white; 
            width: 100%; 
            padding: 15px; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            font-weight: bold; 
            font-size: 1.1em;
            margin-top: 15px;
            box-shadow: 0 4px 0 #952d3e;
        }
        .btn-habbu:active { transform: translateY(2px); box-shadow: 0 2px 0 #952d3e; }
        .msg { background: rgba(0,0,0,0.2); padding: 10px; border-radius: 4px; margin-bottom: 20px; color: #ff4d4d; font-size: 0.9em; border-left: 4px solid #e94560; }
        a { color: #f1c40f; text-decoration: none; font-weight: bold; }
		
		










.search-container {
    margin-bottom: 15px;
    width: 100%;
}

.search-input { 
    width: 100%; 
    padding: 12px 15px; 
    border-radius: 10px; 
    border: 2px solid #e2e8f0; 
    margin-bottom: 10px; 
    font-size: 16px; 
    box-sizing: border-box; 
    transition: border-color 0.3s, box-shadow 0.3s;
    outline: none;
}

.search-input:focus {
    border-color: #0072ce;
    box-shadow: 0 0 8px rgba(0, 114, 206, 0.2);
}














/* words_list.php */
		/* body { font-family: 'Segoe UI', sans-serif; background: transparent; margin: 0; padding: 5px; } */
   /*   .search-input { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #ddd; margin-bottom: 10px; font-size: 16px; box-sizing: border-box; } */
       
     
    .word-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 10px; border-bottom: 1px solid #eee; background: white; border-radius: 8px; margin-bottom: 5px; }
    
    .golden { background: #fff9e6 !important; border-left: 5px solid #ffc107 !important; }
  .actions a { text-decoration: none; margin-left: 12px; font-size: 1.1em; }
  .edit-btn { background: #ffc107; color: black; font-weight: bold; padding: 3px 8px; border-radius: 6px; font-size: 0.8em; }
.learned { 
 opacity: 0.5; 
 background: #f8f9fa !important; 
 text-decoration: line-through; 
  border-left: 5px solid #28a745 !important; /* Зеленая полоска слева для выученных */
}


	.level-filters { 
  display: flex; 
  justify-content: space-between; /* Растягиваем кнопки по всей ширине */
  gap: 4px; /* Уменьшаем зазор между кнопками */
  padding: 8px 4px; 
  background: #fff; 
  position: sticky; 
  top: 0; 
  z-index: 100; 
 box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
  margin-bottom: 10px;
}

.filter-btn { 
  text-decoration: none; 
  flex: 1; /* Каждая кнопка занимает равное место */
 text-align: center;
 padding: 6px 2px; /* Минимальные отступы по бокам */
  border-radius: 8px; 
 font-size: 14px; /* Чуть меньше шрифт, чтобы влезло (15/120) */
 font-weight: bold; 
 border: 1px solid #ddd; 
 color: #333; 
 background: #f9f9f9;
  white-space: nowrap; /* Запрещаем перенос текста внутри кнопки */
}


/* Для экранов побольше (планшеты и ПК) сделаем шрифт крупнее */
@media (min-width: 400px) {
 .filter-btn { font-size: 20px; padding: 8px 5px; }
  .level-filters { gap: 8px; padding: 5px; }
}


	




















/* daily_word.php */
    
  .random-box { 
  background: #0072ce;
  color: white; 
  text-align: center;
  border: none;
  padding: 15px;
  border-radius: 0px;
  position: relative;
  height: 350px; 
  box-sizing: border-box;
  }
  .btn-blue-outline {
	  color: white; 
	  border: 1px solid white; 
	  padding: 6px 12px; border-radius: 6px; 
	  text-decoration: none; 
	  font-size: 1.15em; 
	  margin: 0 5px; 
	  display: inline-block; 
	  transition: 0.3s;
	  }
        .btn-blue-outline:hover { 
		background: rgba(255,255,255,0.2);
		}
        .lvl-link {
			text-decoration: none; 
			font-size: 0.95em; 
			padding: 6px 10px; 
			border-radius: 15px; 
			transition: 0.3s; 
			border: 1px solid white; 
			display: inline-block; 
			
		}



/* classic_test.php */



     /*   body { font-family: sans-serif; text-align: center; margin: 0; padding: 10px; background: #fff; } */

.test-card { border: 1px solid #eee; border-radius: 12px; text-align: center; padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }

        .word-est { font-size: 24px; font-weight: bold; color: white; margin-bottom: 10px; }

        .word-rus { font-size: 18px; color: white; display: none; margin-bottom: 15px; border-top: 1px dashed #ccc; padding-top: 10px; }

        .btn { padding: 10px 15px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 14px; width: 45%; transition: 0.2s; }

        .btn-show { background: #6c757d; color: white; width: 45%; margin-bottom: 10px; }

        .btn-know { background: #28a745; color: white; }

        .btn-next { background: #0072ce; color: white; }

        .controls { display: none; justify-content: space-between; }

/* Пиксельная монетка для классического теста */

.coin-hint-box {

    display: flex;

    align-items: center;

    justify-content: center;

    background: #FFFDF0; /* Тот самый желтоватый фон */

    border: 2px dashed #ffc107;

    padding: 12px;

    border-radius: 12px;

    margin: 20px auto;

    max-width: 300px;

    text-decoration: none;

    color: #444;

    transition: 0.3s;

    box-shadow: 0 4px 0 #EBE4C5;

}

.coin-hint-box:hover {

    transform: translateY(-2px);

    background: #fff9db;

    border-style: solid;

}

.pixel-coin {

    width: 18px;

    height: 18px;

    background: #ffc107;

    border-radius: 50%;

    border: 2px solid #000;

    box-shadow: inset -2px -2px 0px #e6a700, inset 2px 2px 0px #fff9ae;

    margin-right: 10px;

    flex-shrink: 0;

    animation: coin-bounce 1.5s infinite;

}

@keyframes coin-bounce {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-3px); }

}

.coin-hint-text {

    font-size: 14px;

    text-align: left;

    line-height: 1.2;

}

.coin-hint-text strong {

    color: #d4a017;

    text-transform: uppercase;

}
/* Пиксельная золотая монетка */

.pixel-coin {

    display: inline-block;

    width: 16px;

    height: 16px;

    background: #ffc107;

    border-radius: 50%;

    border: 2px solid #000;

    box-shadow: 

        inset -2px -2px 0px #e6a700, /* Тень внутри */

        inset 2px 2px 0px #fff9ae;   /* Блик сверху */

    vertical-align: middle;

    margin-right: 5px;

    position: relative;

    animation: coin-shine 2s infinite;

}

/* Анимация блеска */

@keyframes coin-shine {

    0%, 100% { transform: scale(1); filter: brightness(1); }

    50% { transform: scale(1.1); filter: brightness(1.2); }

}

/* Стиль текста подсказки */

.guest-tip {

    background: rgba(0, 0, 0, 0.3);

    padding: 10px 15px;

    border-radius: 8px;

    display: inline-block;

    margin-top: 15px;

    font-size: 13px;

    color: #fff;

    text-decoration: none;

    border: 1px solid rgba(255,255,255,0.2);

    box-shadow: 0 4px 0 rgba(0,0,0,0.2);

}

.guest-tip:hover {

    background: rgba(0, 0, 0, 0.5);

    transform: translateY(-2px);

}

.guest-tip strong {

    color: #ffc107;

    text-decoration: underline;

}





		/* smart_test.php */
		
  .smart_test {  border: 1px solid #eee; border-radius: 12px; padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
   .title { font-size: 13px; color: #0072ce; font-weight: bold; margin-bottom: 5px; opacity: 0.8; }
    .hint { font-size: 1.2em; color: white; margin-bottom: 10px; font-weight: bold; min-height: 1.4em; }
   .slots { display: flex; justify-content: center; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
    .slot { width: 28px; height: 32px; border-bottom: 3px solid #0072ce; font-size: 18px; font-weight: bold; display: flex; align-items: center; justify-content: center; background: #f8f9fa; }
    .keyboard { display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; max-width: 360px; margin: 0 auto; padding: 0 5px; }
    .key { background: white; border: 2px solid #0072ce; color: #0072ce; padding: 7px 10px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 15px; min-width: 32px; }
    .key.used { opacity: 0.2; pointer-events: none; }
    .nav-buttons { margin-top: 15px; display: flex; justify-content: center; padding-bottom: 10px; }
   .btnsm { border: none; padding: 12px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; color: white; width: 45%; font-size: 15px; }
   .btnsm-skip { background: #6c757d; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .btnsm-next { background: #28a745; display: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    #msg { margin-top: 8px; height: 18px; font-size: 14px; font-weight: bold; }

/* Пиксельная монетка и блок для смарт-теста */
.coin-hint-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFDF0; 
    border: 2px dashed #ffc107;
    padding: 12px;
    border-radius: 12px;
    margin: 20px auto;
    max-width: 320px;
    text-decoration: none;
    color: #444;
    transition: 0.3s;
    box-shadow: 0 4px 0 #EBE4C5;
}

.coin-hint-box:hover {
   transform: translateY(-2px);
    background: #fff9db;
    border-style: solid;
}
.pixel-coin {
    width: 18px;
    height: 18px;
    background: #ffc107;
    border-radius: 50%;
    border: 2px solid #000;
    box-shadow: inset -2px -2px 0px #e6a700, inset 2px 2px 0px #fff9ae;
    margin-right: 10px;
    flex-shrink: 0;
    animation: coin-bounce 1.5s infinite;
}

@keyframes coin-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.coin-hint-text {
    font-size: 14px;
    text-align: left;
    line-height: 1.2;
	}

.coin-hint-text strong {
    color: #d4a017;
}






	
















/* 2. Центральный контейнер сайта */
.site-wrapper {
    max-width: 960px; 
    margin: 0 auto; /* Центрируем, 0 сверху прижимает к краю экрана */
    background: #004d6b; /* Тёмно-синий основной фон "здания" */
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 3. Шапка (прижата к верху) */
.top-nav {
    background: #004d6b;
    padding: 5px 20px; /* Уменьшили отступы */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
}

/* 4. Hero-секция (SÕNA TEST) */
.hero-section {
    background: #0072ce; 
    padding: 20px 20px; /* Уменьшили вертикальные отступы с 40 до 20 */
    text-align: center;
    color: white;
    border-bottom: 4px solid #0072ce;
}

.hero-title {
    font-size: 28px;
    font-weight: 800;
    margin: 10px 0; /* Уменьшили отступы вокруг заголовка */
    text-transform: uppercase;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
}

/* 5. Узкое меню Habbu.ee */
.main-menu {
    background: #FFFDF0;
    display: flex;
    justify-content: center; /* Собираем пункты ближе к центру */
    gap: 15px; /* Расстояние между пунктами */
    padding: 6px 0; /* Минимальная высота */
    border-bottom: 2px solid #ffc107;
    flex-wrap: nowrap; /* Не даем переноситься, пока есть место */
    overflow-x: auto; /* На очень узких телефонах можно будет прокрутить пальцем */
}

.menu-item {
    text-decoration: none;
    color: #0072ce;
    font-size: 14px; /* Уменьшили шрифт */
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap; /* Запрещаем перенос текста внутри кнопки */
    display: flex;
    align-items: center;
    gap: 4px; /* Расстояние от иконки до текста */
    transition: 0.2s;
}

.menu-item:hover {
    color: #ffc107;
}

.menu-item.active {
    color: #1a1a2e;
}

/* Скрываем полосу прокрутки для красоты */
.main-menu::-webkit-scrollbar {
    display: none;
}





/* 6. Секции контента (желтоватые карточки) */
.section-header {
    background: #002d40;
    color: white;
    padding: 12px 20px;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 2px solid #001b26;
}

.content-box {
    background: #FFFDF0; /* Тот самый желтоватый фон */
    margin: 15px;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #d4e3eb;
    color: #333; /* Текст в блоках темный для читаемости */
}

/* Стили для кнопок и элементов внутри */
.join-button {
    background: #008037;
    color: white;
    padding: 10px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    border: 3px solid #005d28;
    display: inline-block;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2);
}

.login-link {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
}

/* Прогресс-бар */
.progress-container { 
    background: #eee; 
    border-radius: 10px; 
    height: 10px; 
    overflow: hidden; 
    margin: 10px 0; 
}
.progress-bar { 
    background: #28a745; 
    height: 100%; 
    transition: 0.8s; 
}

/* Исправляем якорь скролла */
#daily-section {
    position: relative;
    top: 0; /* Убрали -100px, чтобы не было дырки сверху */
    visibility: hidden;
}





.card, .stat-card, .top-card, .test-container {
    background: #FFFDF0;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.1);
    margin-bottom: 20px;
    border: 1px solid #d4e3eb;
    
    /* ИСПРАВЛЕНИЕ: */
    width: 100%;            /* Растягиваем на всю ширину */
    max-width: 100%;        /* Запрещаем быть шире родителя */
    box-sizing: border-box; /* Важно: padding теперь не раздувает блок вширь */
    overflow: hidden;       /* Обрезаем то, что всё равно вылезет */
}







/* АДАПТАЦИЯ ДЛЯ МОБИЛОК (экран меньше 768px) */
@media (max-width: 768px) {
   
body { 
        font-size: 18px; 
    }


   .card, .stat-card, .top-card {
        margin: 10px 0 !important; /* Убираем боковые отступы у блоков */
        padding: 10px; /* Уменьшаем внутренние поля, чтобы контент был шире */
        border-left: none; /* Можно убрать рамки по бокам для эффекта "на весь экран" */
        border-right: none;
        border-radius: 0; /* Плоские блоки на мобилке выглядят лучше */
    }


/* Специальный стиль для контейнеров с тестами (фреймами) */



test-container {
    padding: 0 !important; /* Важно: убираем отступы, чтобы iframe занимал всё место */
}



.smart-container {
    border: 2px solid #0072ce; /* Синяя рамка для клавиатурного теста */
}






/* Найди этот блок в медиа-запросе @media (max-width: 768px) и подправь: */
@media (max-width: 768px) {
    .card h4, .stat-card h4, .test-container h4 {
        /* ИСПРАВЛЕНИЕ: уменьшаем отрицательный отступ или убираем его */
        margin: -10px -10px 15px -10px !important; 
        padding: 10px;
        font-size: 16px;
    }
    
    .site-wrapper {
        overflow-x: hidden; /* Дополнительная защита от вылетания */
    }
}




/* Фиксируем высоту графика, чтобы Minu Edu не "прыгал" */

.chart-container { 
    display: flex; 
    align-items: flex-end; 
    justify-content: space-around; 
    height: 120px; /* Увеличили высоту для цифр */
    margin-top: 30px; 
    padding-top: 10px; 
    border-top: 1px solid #eee; 
}

.chart-bar { 
    background: #0072ce; 
    width: 40px; /* Сделали столбики шире для ПК */
    border-radius: 4px 4px 0 0; 
    position: relative; 
}

.chart-value { 
    position: absolute; 
    top: -25px; 
    left: 50%; 
    transform: translateX(-50%); 
    font-size: 12px; 
    font-weight: bold; 
    color: #333;
}

.chart-label { 
    position: absolute; 
    bottom: -20px; 
    left: 50%; 
    transform: translateX(-50%); 
    font-size: 10px; 
    color: #888; 
}







/* Специальное исправление для линии пути на мобилках */
@media (max-width: 600px) {
    #extra-info .stat-card div[style*="display: flex"] {
        flex-wrap: wrap; /* Позволяем иконкам переноситься на вторую строку */
        justify-content: center !important;
        gap: 10px;
    }
    
    #extra-info .stat-card div[style*="position: absolute"] {
        display: none; /* Прячем серую линию прогресса, так как она ломает верстку на мобилке */
    }
}






	























	/* promo_block.php */
/*	body { margin: 0; padding: 0; font-family: sans-serif; overflow: hidden; } */

        .promo-container {

            background: <?= $random_banner['bg'] ?>;

            color: white;

            padding: 12px;

            text-align: center;

            border-radius: 10px;

            text-decoration: none;

            display: block;

            transition: 0.3s;

            height: 85px;

        }

        .promo-container:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }

        .promo-title { font-weight: bold; font-size: 1.1em; margin-bottom: 3px; text-transform: uppercase; }

        .promo-text { font-size: 0.85em; opacity: 0.9; margin-bottom: 7px; }

        .btn-action {

            display: inline-block;

            background: #ffc107;

            color: #000;

            padding: 3px 12px;

            border-radius: 20px;

            font-weight: bold;

            font-size: 0.75em;

        }



































/* support.php */

 /* body { 
            font-family: 'Segoe UI', sans-serif; 
            background-color: #D9EAF2; 
            margin: 0; 
            padding: 20px; 
            display: flex; 
            justify-content: center; 
        } */
 
 .container { 
            max-width: 600px; 
            background: #FFFDF0; 
            border-radius: 4px; 
            border: 1px solid #d4e3eb;
            box-shadow: 0 4px 0 rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .header {
            background: #002d40;
            color: white;
            padding: 15px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            text-transform: uppercase;
        }
        .content { padding: 25px; color: #333; }
        
        .price-badge { 
            background: #fdf2f2; 
            color: #e74c3c; 
            padding: 12px; 
            border-radius: 8px; 
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
            border: 1px solid #fadbd8;
        }

        .bank-details {
            background: #fff;
            border: 2px dashed #0072ce;
            padding: 20px;
            border-radius: 8px;
            margin-top: 15px;
        }
        .bank-row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            font-size: 14px;
        }
        .bank-row:last-child { border-bottom: none; }
        .label { color: #666; }
        .value { color: #000; font-weight: bold; text-align: right; }

        .info-box {
            background: #e9f4f9;
            padding: 15px;
            border-radius: 4px;
            font-size: 14px;
            color: #004d6b;
            margin-top: 20px;
            border-left: 4px solid #0072ce;
        }

        .back-link { 
            display: inline-block; 
            margin-top: 25px; 
            text-decoration: none; 
            color: #0072ce; 
            font-weight: bold; 
            font-size: 14px;
        }