html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.slime {
    --slime-navbar-toggler-padding-y: 0.25rem;
    --slime-navbar-toggler-padding-x: 0.75rem;
    --slime-navbar-toggler-font-size: 1.25rem;
    --slime-toggler-icon-bg: url("../image/Toggler.png");
    --slime-navbar-toggler-border-color: rgba(255, 255, 255, 0.15);
    --slime-navbar-toggler-border-radius: 0.375rem;
    --slime-navbar-toggler-focus-width: 0.25rem;
    --sime-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
}

.slime-main {
    display: flex; /* Включает выравнивание в ряд */
    flex: 1;
    width: 100%; /* Занимает всю ширину родителя */
    transition: transform 0.3s ease;
    box-sizing: border-box;
}

/* Этот блок займет всё свободное место слева */
.slime-content-area {
    flex-grow: 1;
    min-width: 0;
}

.slime-container {
    margin: 15px 5%;
}

.slime-toggler-button {
    margin: 5px;
    padding: var(--slime-navbar-toggler-padding-y) var(--slime-navbar-toggler-padding-x);
    font-size: var(--slime-navbar-toggler-font-size);
    line-height: 1;
    color: var(--slime-navbar-color);
    background-color: transparent;
    border: 1px solid var(--slime-navbar-toggler-border-color);
    border-radius: var(--slime-navbar-toggler-border-radius);
    transition: var(--slime-navbar-toggler-transition);
}

    .slime-toggler-button:hover {
        text-decoration: none;
    }

.slime-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 var(--slime-navbar-toggler-focus-width);
}

.slime-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: var(--slime-toggler-icon-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.slime-border-bottom {
    border-bottom: 1px;
}


.slime-brand {
    margin: 5px;
    font-size: 1.25rem;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.slime-header {
    background: #222;
    color: white;
    flex-shrink: 0; /* Чтобы шапка и футер не сжимались */
    display: flex;
    align-items: center;
    padding: 0 20px;
    /* ИЗМЕНЕНИЯ ТУТ: */
    position: fixed; /* Шапка теперь зафиксирована */
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Задайте фиксированную высоту */
    z-index: 1000;
    justify-content: space-between;
}

.slime-menu-active .slime-header {
    left: 100px; /* Сдвигаем точку начала */
    width: calc(100% - 100px); /* Убираем лишние 100px из общей ширины */
}

.slime-wrapper {
    display: flex;
    margin-top: 60px; /* Отступ сверху, чтобы контент не ушел под фиксированную шапку */
}

#slime-mySidebar {
    width: 100px;
    min-width: 100px;
    /* ИЗМЕНЕНИЯ ТУТ: */
    position: fixed; /* Меню теперь тоже зафиксировано */
    top: 60px; /* Должно начинаться под шапкой (высота шапки) */
    left: 0;
    height: calc(100vh - 60px); /* На всю высоту экрана за вычетом шапки */
    background: #333;
    display: flex;
    flex-direction: column;
    z-index: 999;
    margin-left: -100px; /* Спрятано по умолчанию */
    transition: margin-left 0.3s ease; /* Плавное выезжание */
    overflow-y: auto;
}

    #slime-mySidebar a {
        color: white;
        text-decoration: none;
        padding: 15px 5px;
        text-align: center;
        border-bottom: 1px solid #444;
        font-size: 14px;
    }

/* Класс для активации сдвига */
.slime-menu-active #slime-mySidebar {
    margin-left: 0;
}
/* Когда меню открыто */
.slime-menu-active .slime-main {
    width: calc(100% - 100px) !important;
    margin-left: 100px; /* Вместо translateX */
    transform: none !important;
}



.ads-block {
    width: 150px; /* Жесткая ширина рекламы */
    margin-left: 20px; /* Отступ от контента */
    background: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    border-left: 1px solid #ccc;
}

.ad-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
}


.icon {
    font-size: 20px;
}




/* Контейнер остается прежним */
.slime-row-cols-md-3 {
    display: flex;
    flex-wrap: wrap;
}

/* Базовые настройки для всех колонок */
.col-item {
    box-sizing: border-box;
    padding: 15px; /* Зазор между колонками */
}

/* Десктопные размеры сетки */
@media (min-width: 768px) {
    .col-side {
        flex: 0 0 25%;
        margin-top: 50px;
    }

    .col-main {
        flex: 0 0 50%;
        /* Центрирование содержимого */
        display: flex;
        flex-direction: column; /* Элементы (картинка и текст) встанут друг под друга */
        align-items: center; /* Центровка по горизонтали */
        text-align: center; /* Центровка текста */
    }
}

.type-me {
    white-space: pre-wrap; /* Сохраняет пробелы и делает переносы строк */
}

/* Эффект глитча при печати */
.is-typing {
    position: relative;
    color: #00ffcc; /* Киберпанк зеленый или голубой */
    text-shadow: 0 0 5px rgba(0, 255, 204, 0.5);
}

/* Анимация "шума", которая будет срабатывать на каждом шаге */
.glitch-flash {
    animation: glitch-anim 0.2s steps(2) infinite;
}

@keyframes glitch-anim {
    0% {
        transform: translate(0);
        text-shadow: -2px 0 red, 2px 0 blue;
    }

    25% {
        transform: translate(-1px, 1px);
        opacity: 0.8;
    }

    50% {
        transform: translate(1px, -1px);
        text-shadow: 2px 0 red, -2px 0 blue;
    }

    100% {
        transform: translate(0);
    }
}


/* СТИЛИ КОНТЕНТА (внутренних блоков) */
.content {
    border: 5px solid #000;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;

    min-width:225px;


    max-width: 300px;
    max-height: 1000px;
}

.col-main .content img {
    height: 400px; /* У центральной картинка выше */
}

/* Контент боковых колонок */
.col-side .content img {
    height: 400px; /* У боковых картинка ниже */
}

/* Общие стили для картинок и текста */
.content img {
    width: 100%;
    object-fit: cover;
    display: block;
    border-bottom: 5px solid #000;
}

.info {
    padding: 20px;
    text-align: center;
}

/* Мобильная адаптация */
@media (max-width: 767px) {
    .col-item {
        flex: 0 0 100%;
    }

    .col-main {
        order: -1;
    }

        .col-main .content {
            transform: none; /* На мобилках лучше убрать увеличение */
        }
}






/* Новый скрипт для визуала*/
/* ... CSS остается без изменений ... */

.game-wrapper {
    display: flex;
    align-items: center;
    justify-content: center; /* Центрируем всю конструкцию */
    gap: 60px; /* Большой отступ между текстом и телефоном */
    padding: 40px;
    max-width: 1200px; /* Ограничиваем общую ширину для красоты */
    margin: 0 auto; /* Центрируем контейнер на странице */
}

.game-info {
    flex: 2;
    background: #0d1117; /* Глубокий темный цвет */
    color: #00ff41; /* Классический "хакерский" зеленый */
    font-family: 'Courier New', Courier, monospace;
    padding: 30px;
    border: 2px solid #00ff41;
    border-radius: 10px;
    box-shadow: inset 0 0 20px rgba(0, 255, 65, 0.2);
    line-height: 1.5;
}

/* Мигающая точка статуса */
.blink {
    animation: blinker 1s linear infinite;
    color: #ff3e3e;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.simulation-header {
    font-size: 1.5em;
    font-weight: bold;
    border-bottom: 1px solid #00ff41;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.highlight {
    background: #00ff41;
    color: #000;
    padding: 2px 5px;
}

.protocol-box {
    margin: 20px 0;
    padding: 15px;
    border: 1px dashed #00ff41;
}

    .protocol-box h4 {
        margin-top: 0;
        text-decoration: underline;
    }

    .protocol-box ul {
        list-style: none;
        padding: 0;
    }

    .protocol-box li span {
        color: #fff;
        font-weight: bold;
    }

.directive {
    font-style: italic;
    color: #888;
    margin-top: 30px;
}

#phone-wrapper {
    width: 360px; /* Ширина экрана смартфона */
    height: 640px; /* Высота экрана смартфона */
    border: 12px solid #1a1a1a; /* Рамка корпуса */
    border-radius: 30px; /* Закругление углов */
    background-color: #2c3e50;
    position: relative;
    overflow: hidden; /* Все, что вылетает за края, обрезается */
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

#game-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column; /* Элементы идут сверху вниз */
    justify-content: flex-start; /* Выравнивание к верху контейнера */
    align-items: center;
    /* Добавьте эти строки: */
    background-image: url('../image/Background.png'); /* Или ссылка из интернета */
    background-size: cover;
    background-position: center;
    padding-top: 20px; /* Небольшой отступ сверху для заголовка */
}

.game-logo-top {
    width: 350px; /* Размер логотипа */
    height: auto;
    margin-top: 20px; /* Отступ от верхнего края "экрана телефона" */
    margin-bottom: 10px; /* Отступ до заголовка H1 */
}

/* Также обновите отступы для заголовка H1 и слизня, чтобы они не наезжали друг на друга: */

#game-container h1 {
    margin-top: 0; /* Убираем стандартный верхний отступ H1 */
    margin-bottom: 20px; /* Добавляем отступ после H1 до слизня */
}

#slime {
    width: 200px;
    /* Попробуй вставить прямую ссылку на картинку из интернета для теста */
    cursor: url('../image/Sword_icon_curs.png') 16 16, pointer !important;
    transition: transform 0.1s;
    user-select: none;
    display: block;
    margin-top: 200px; /* Опускаем слизняк ниже */
}

    #slime:active {
        transform: scale(0.9) translateY(10px);
    }

.damage {
    position: absolute;
    font-weight: bold;
    font-size: 24px;
    pointer-events: none;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.normal-hit {
    color: #ff4757;
}

.crit-hit {
    color: #ffed47;
    font-size: 32px;
    text-shadow: 0 0 5px #ffed47;
    animation-duration: 1s;
}

.miss {
    color: #aaaaaa;
    font-size: 18px;
}

@keyframes flyUpLeft {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(-50px, -120px) scale(0.8) rotate(-10deg);
    }
}

@keyframes flyUpRight {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(50px, -120px) scale(0.8) rotate(10deg);
    }
}
/* ... Конец CSS ... */

#bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px; /* Увеличиваем высоту панели */
    background-color: white;
    display: flex;
    justify-content: center; /* Центрируем содержимое по горизонтали */
    padding: 0 15px;
    box-sizing: border-box;
    border-top: 2px solid #ddd;
}

.info-section {
    display: flex;
    flex-direction: column; /* Выстраиваем элементы вертикально (друг под другом) */
    gap: 5px; /* Небольшой зазор между названием и кнопкой */
    margin-top: 20px;
}

.game-title {
    font-weight: bold;
    color: #2c3e50;
    font-size: 16px;
    margin-bottom: 4px; /* Дополнительный отступ под названием */
}

#bottom-bar button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

    #bottom-bar button:hover {
        background-color: #2980b9;
    }

.achievement-notification {
    position: fixed; /* Закрепляет элемент относительно окна браузера */
    bottom: 20px; /* Отступ от нижнего края */
    left: 20px; /* Отступ от левого края */
    z-index: 1000; /* Гарантирует, что будет поверх других элементов */
    background-color: #2c3e50; /* Темный фон для контраста */
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    color: white; /* Цвет текста */
    opacity: 0; /* Изначально скрыт, анимация покажет */
    /* Используем другую анимацию, чтобы он просто появлялся и исчезал на месте */
    animation: fadeInOutNotification 4s ease-out forwards;
}

/* Новая анимация для появления и исчезания в углу */
@keyframes fadeInOutNotification {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    10% {
        opacity: 1;
        transform: translateY(0);
    }

    90% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(50px);
    }
}


/* Базовый класс для печати */
.typewriter {
    overflow: hidden; /* Скрывает буквы, которые еще не "напечатаны" */
    white-space: nowrap; /* Текст в одну строку */
    border-right: 3px solid #00ff41; /* Курсор в конце */
    width: 0;
    animation: typing 2s steps(30, end) forwards, blink-caret 0.75s step-end infinite;
}

/* Более медленная печать для второй строки с задержкой */
.typewriter-slow {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid #00ff41;
    width: 0;
    opacity: 0;
    animation: typing 3s steps(40, end) 1s forwards, /* Начнется через 2 секунды */
    blink-caret 0.75s step-end infinite;
}

/* Анимация раскрытия ширины (печать) */
@keyframes typing {
    from {
        width: 0;
        opacity: 1;
    }

    to {
        width: 100%;
        opacity: 1;
    }
}

/* Анимация мигания курсора */
@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }

    50% {
        border-color: #00ff41;
    }
}

@media (max-width: 900px) {
    .game-wrapper {
        flex-direction: column; /* Располагаем блоки вертикально (текст сверху, игра снизу) */
        gap: 30px;
        padding: 15px;
        align-items: center; /* Центрируем всё по горизонтали */
    }

    .game-info {
        flex: none; /* Отключаем растягивание */
        width: 100%; /* Текст занимает всю ширину */
        max-width: 500px; /* Но не становится слишком широким для чтения */
        min-width: unset; /* Сбрасываем минимальную ширину */
    }

    #phone-wrapper {
        flex: none; /* Отключаем фиксацию flex */
        width: 320px; /* Немного уменьшаем телефон для мобилок */
        height: 550px;
    }

    .game-logo-top {
        width: 250px; /* Размер логотипа */
        height: auto;
        margin-top: 10px; /* Отступ от верхнего края "экрана телефона" */
        margin-bottom: 10px; /* Отступ до заголовка H1 */
    }

    #slime {
        width: 175px;
        margin-top: 150px; /* Опускаем слизняк ниже */
    }

    .slime-main {
        flex-direction: column; /* Реклама падает ВНИЗ под игру */
    }

    .ads-block {
        width: 100%;
        min-width: 100%;
        margin-left: 0px;
        margin-top: 40px;
        padding: 20px 0;
    }

    .slime-menu-active .slime-main,
    .slime-menu-active .slime-header {
        width: 100% !important;
        margin-left: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    /* 2. Сайдбар накладывается ПОВЕРХ */
    #slime-mySidebar {
        position: fixed;
        z-index: 999; /* Выше шапки и всего контента */
        /* Начинаем строго под шапкой */
        top: 60px !important;
        /* Высота — весь экран минус высота шапки */
        height: calc(100vh - 60px) !important;
        top: 0; /* На мобильных лучше закрывать и шапку тоже */
        box-shadow: 10px 0 20px rgba(0,0,0,0.4);
    }
        /* Если нужно, чтобы шапка была ПОВЕРХ выезжающего меню */
    .slime-header {
        z-index: 1000; 
    }
    /* 3. Реклама и игра в колонку (ваш предыдущий код) */
    .slime-main {
        flex-direction: column;
    }

    .ads-block {
        width: 100%;
        margin-top: 20px;
    }
}

/* 3. СМАРТФОН (до 400px и до самого минимума 320px) */
@media (max-width: 400px) {
    .game-wrapper {
        padding: 10px;
        gap: 15px;
    }

    /* Уменьшаем телефон, чтобы он влез в экран 320px с учетом отступов */
    #phone-wrapper {
        width: 290px; /* Было 320, уменьшаем чтобы не было скролла */
        height: 500px;
    }

    .game-logo-top {
        width: 200px; /* Уменьшаем логотип */
    }

    #slime {
        width: 150px; /* Уменьшаем персонажа */
        margin-top: 150px;
    }

    .game-info h1 {
        font-size: 1.5rem; /* Уменьшаем заголовок, чтобы не переносился криво */
    }

    /* Скрываем рекламу на самых маленьких экранах (опционально) */
    /* .ads-block { display: none; } */
}

.user-row-wrapper {
    display: flex; /* В линию */
    align-items: center; /* По центру вертикально */
    gap: 15px; /* Расстояние между профилем и выходом */
    width: 100%; /* Растягиваем, если нужно */
}

    /* Убираем лишние отступы у ссылки, чтобы не раздувала шапку */
    .user-row-wrapper .nav-link {
        padding: 0;
        margin: 0;
        display: flex;
    }

/* Внутренняя структура карточки тоже в линию */
.user-profile-card {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slime-user-info {
    display: flex;
    flex-direction: column; /* Имя и XP в одну строку */
    gap: 10px;
    align-items: baseline;
    line-height: 0.5;
}

.login-form {
    width: 50%; /* Ограничиваем ширину контейнера */
    margin: 0 auto; /* Центрируем сам контейнер на странице */
    padding-top: 50px; /* Оставляем сверху, а не по центру экрана */
}

.profile-content {
    width: 50%; /* Ограничиваем ширину контейнера */
}

/* 1. Экраны больше 900px */
@media (min-width: 901px) {
    .login-form {
        width: 40%;
    }
    .profile-content {
        width: 50%; /* Ограничиваем ширину контейнера */
    }
}

/* 2. Экраны от 600px до 900px */
@media (min-width: 600px) and (max-width: 900px) {
    .login-form {
        width: 50%;
    }

    .profile-content {
        width: 60%; /* Ограничиваем ширину контейнера */
    }
}

/* 3. Экраны меньше 600px */
@media (max-width: 599px) {
    .login-form {
        width: 75%;
    }
    .profile-content {
        width: 75%; /* Ограничиваем ширину контейнера */
    }
}