/* ---------------------------------------------
   Сброс и базовые настройки
   --------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #0d0d0d;
    color: #e0e0e0;
    font-size: 16px;
    line-height: 1.5;
    padding: 8px;
}

/* Контент */
.content {
    max-width: 500px;
    margin: 0 auto;
}

/* Заголовок */
.header {
    text-align: center;
    padding: 12px 0;
    margin-bottom: 12px;
    border-radius: 6px;
}

.gray-bg {
    background-color: #1a1a1a;
}

/* Блоки */
.block {
    background-color: #141414;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 12px;
}

.block.center {
    text-align: center;
}

/* Разделители */
.line {
    height: 1px;
    background-color: #333;
    margin: 12px 0;
}

.dotted {
    height: 1px;
    background: repeating-linear-gradient(
        to right,
        transparent,
        transparent 4px,
        #333 4px,
        #333 8px
    );
    margin: 12px 0;
}

/* Текстовые стили */
.small {
    font-size: 13px;
    color: #aaa;
}

.color1 { color: #4caf50; font-weight: bold; }
.color2 { color: #ff9800; }
.blue   { color: #2196f3; }
.green  { color: #4caf50; }
.red    { color: #f44336; }

/* Кнопки */
.btn {
    display: inline-block;
    background: linear-gradient(to bottom, #2c2c2c, #1a1a1a);
    color: #fff;
    border: 1px solid #444;
    padding: 8px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    min-width: 120px;
}

.btn:hover {
    background: linear-gradient(to bottom, #3a3a3a, #252525);
    border-color: #666;
}

/* Формы */
.form-group { margin-bottom: 16px; text-align: left; }
.control-label { display:block; margin-bottom:6px; font-weight:bold; color:#ccc; }
.form-control {
    width:100%;
    padding:10px;
    background:#1e1e1e;
    border:1px solid #444;
    border-radius:4px;
    color:#fff;
    font-size:16px;
}
.form-control:focus { outline:none; border-color:#2196f3; }

.help-block { color:#f44336; font-size:14px; margin-top:6px; }

/* Меню */
.menu ul { list-style:none; padding:0; }
.menu li { margin-bottom:8px; }
.menu a {
    display:flex; align-items:center; gap:10px;
    padding:12px; background:#1a1a1a; border:1px solid #333; border-radius:6px;
    color:#e0e0e0; text-decoration:none; transition:background .2s;
}
.menu a:hover { background:#252525; }
.menu img { width:16px; height:16px; object-fit:contain; }

/* ---------------------------------------------
   Профиль: аватар и панели экипировки
   HTML-структура ожидается:
   <div class="profile-dummy-block">
     <div class="equip-panel panel-left"> ... <div class="slot ..."></div> ...</div>
     <!-- сюда вставлен аватар (img) -->
     <div class="equip-panel panel-right"> ... </div>
   </div>
   --------------------------------------------- */

/* Основной контейнер профиля */
.profile-dummy-block {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:nowrap;
    width:100%;
    max-width: 720px;
    margin: 8px auto;
    position: relative;
}

/* Панели слотов слева/справа */
.equip-panel {
    display:flex;
    flex-direction:column;
    gap: 10px;
    align-items:center;
    justify-content:center;
    min-width:44px;
}

/* Разные отступы для левой/правой панели при необходимости */
.equip-panel.panel-left { align-items:flex-end; padding-right:6px; }
.equip-panel.panel-right { align-items:flex-start; padding-left:6px; }

/* Слот */
.slot {
    width:44px;
    height:44px;
    background: rgba(26,26,42,0.95);
    border:1px solid #333;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    color:#ccc;
    font-size:11px;
    transition: transform .12s ease, box-shadow .12s ease;
}

/* Если слот пустой */
.slot.empty1, .slot.empty2, .slot.empty3, .slot.empty4,
.slot.empty5, .slot.empty6, .slot.empty7, .slot.empty8 {
    opacity:0.6;
}

/* Содержимое слота — картинка */
.slot img { max-width:100%; max-height:100%; display:block; }

/* Центральный блок с аватаром (можно внутри .profile-dummy-block поставить <div class="avatar-wrap"><img class="avatar-img"/></div>) */
.avatar-wrap {
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width: auto;
    flex: 0 0 auto;
}
.avatar-img {
    display:block;
    width: 140px;
    height: auto;
    border-radius:8px;
    border:2px solid #4b0082;
    box-shadow: 0 6px 18px rgba(0,0,0,0.6);
    background:#12121a;
}

/* Ховер эффекты */
.slot:hover { transform: translateY(-6px); box-shadow: 0 8px 18px rgba(0,0,0,0.6); }

/* ---------------------------------------------
   Адаптив: на узких экранах панели становятся поверх/вокруг аватара
   --------------------------------------------- */
@media (max-width: 520px) {

    /* Меняем структуру: профиль на одной колонке */
    .profile-dummy-block {
        flex-wrap:wrap;
        gap:6px;
        padding: 6px 0;
    }

    /* Панели теперь позиционируем абсолютно вокруг аватара */
    .avatar-wrap {
        position: relative;
        width: 100%;
        display:block;
        max-width: 220px;
        margin: 0 auto;
    }
    .avatar-img {
        width: 72%;
        max-width: 160px;
        display:block;
        margin: 0 auto;
    }

    /* Переключаем панели в абсолютное позиционирование вокруг аватара */
    .equip-panel {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display:flex;
        flex-direction:column;
        gap:8px;
        z-index: 2;
        pointer-events: none; /* чтобы клики проходили на слоты — отменим для слотов ниже */
    }

    .equip-panel.panel-left {
        left: calc(50% - 50% - 20px); /* подвинет влево от центра аватара; корректируйте при необходимости */
        transform: translate(-8px, -50%);
    }
    .equip-panel.panel-right {
        right: calc(50% - 50% - 20px); /* подвинет вправо от центра аватара */
        transform: translate(8px, -50%);
    }

    /* Слоты становятся кликабельными */
    .equip-panel .slot { pointer-events: auto; }

    /* Уменьшаем слоты */
    .slot { width:36px; height:36px; border-radius:7px; }
}

/* Более тонкая настройка для очень узких экранов */
@media (max-width: 380px) {
    .avatar-img { width: 78%; max-width: 130px; }
    .slot { width:32px; height:32px; font-size:10px; border-radius:6px; gap:6px; }
    .equip-panel.panel-left { left: 6px; transform: translateY(-50%); }
    .equip-panel.panel-right { right: 6px; transform: translateY(-50%); }
}

/* Десктоп: ставим панели вертикально рядом с аватаром (по умолчанию) */
@media (min-width: 900px) {
    .profile-dummy-block { gap:24px; align-items:center; }
    .avatar-img { width: 160px; }
    .slot { width:48px; height:48px; border-radius:10px; }
}

/* ---------------------------------------------
   Доп. стили для секций профиля, боковых панелей и утилит
   --------------------------------------------- */
.hero-sidebar {
    background:#12121a;
    border:1px solid #333;
    padding:16px;
    border-radius:6px;
    font-size:13px;
    color:#ccc;
    text-align:center;
}

.hero-main {
    background:#12121a;
    border:1px solid #333;
    padding:16px;
    border-radius:6px;
    text-align:center;
    color:#ccc;
    min-width:280px;
}

.online-indicator { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }

.hero-section-link {
    display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px;
    background:#1a1a2a; border-radius:4px; color:#ccc; text-decoration:none; font-size:12px;
}

.hero-action .btn { min-width:120px; margin:4px 0; }

.center { text-align:center; }
.hidden { display:none !important; }