/* ---------- Достижения ---------- */
.ach-page { 
        background: radial-gradient(ellipse at 20% 20%, rgba(230, 57, 70, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(74, 158, 255, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(255, 140, 0, 0.04) 0%, transparent 50%), linear-gradient(180deg, #0c0c0e 0%, #141416 20%, #1c1c1e 50%, #141416 80%, #0c0c0e 100%);
    border-radius: 6px;
    margin: 10px;
     padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
 }
.ach-h { margin: 12px 0; font-size: 20px; }
.crumbs { font-size: 13px; opacity: .8; margin-bottom: 8px; }
.crumbs a { color: inherit; text-decoration: none; }

/* Плитки категорий */
.ach-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.cat-tile, .sub-tile {
    width: 30%;
    text-align: center;
    display: block;
    position: relative;
    color: #9cd0e1;
    text-decoration: none;
}
.sub-icon img{ width: 50px;  height: 50px; }
.cat-icon img {  width: 80px;  height: 80px;}
.ae img {  width: 20px;  height: 20px;     vertical-align: middle;}
.cat-title, .sub-title {display: block; }
.cat-num, .sub-num { font-size: 12px; opacity: .7; color: #578888 ;}
.cat-bar, .ai-bar {
    display: block;
    height: 6px;
    background: #333;
    border-radius: 3px;
    margin-top: 6px;
    overflow: hidden;
}
.cat-bar i, .ai-bar i {
    display: block;
    height: 100%;
    background: #4caf50;
    transition: width .3s;
}

/* Бейдж */
.badge-pulse {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    line-height: 20px;
    background: #2f6533;
    color: #fff;
    font-size: 11px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(229,57,53,.7); }
    70%     { box-shadow: 0 0 0 6px rgba(229,57,53,0); }
}

/* Блок "забрать" */
.claim-panel {
    background: #1e2a1e;
    border: 1px solid #2e5233;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 14px;
}
.claim-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 15px;
}
.claim-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid #2e5233;
    font-size: 14px;
}
.claim-item .ci-icon { font-size: 18px; }
.claim-item .ci-icon img { width: 25px; height: 25px; vertical-align: middle; }
.claim-item .ci-title { flex: 1; }
.claim-item .ci-reward { color: #7fd47f; font-weight: bold; }

/* Кнопки */
.btn-claim, .btn-claim-all, .btn-small {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: #4caf50;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}
.btn-claim-all { background: #2e7d32; }
.btn-small { background: #3949ab; padding: 4px 10px; font-size: 12px; }

/* Список достижений */
.ach-list { display: flex; flex-direction: column; gap: 8px; }
.ach-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: #1e1f26;
    border: 1px solid #2c2f39;
    border-radius: 5px;
}
.ach-item.open { border-color: #2e5233; background: #1a231a; }
.ai-icon img { width: 60px; height: 60px; }
.ai-body { flex: 1; }
.ai-title {  color:#f3ac4e }
.ai-desc { font-size: 13px; opacity: .75; margin: 2px 0 6px;  color:#fdfdfd }
.ai-done { color: #858685; font-size: 12px; }
.ai-num { font-size: 12px; opacity: .75; margin-top: 2px; }
.ai-reward { font-size: 12px; color: #ffd54f; margin-top: 4px; }
.ai-action { display: flex; align-items: center; }
.claimed { font-size: 12px; color: #7fd47f; }

/* Титулы */

.ti-icon img { width: 30px; height: 30px; }

.active-title-box {
    padding: 5px;
    background: #1e2a1e;
    border: 1px solid #2e5233;
    border-radius: 5px;
    margin: 8px 0;
    text-align: center;
}
.active-title-box img {width: 30px; height: 30px; vertical-align: middle;}
.muted { opacity: .6; font-size: 12px; }

/* Блок титула на странице подкатегории */
.sub-title-box {
    padding: 10px 12px;
    margin: 8px 0 14px;
    background: #1a1a2e;
    border: 1px solid #3949ab;
    border-radius: 8px;
    font-size: 14px;
}
.sub-title-box.unlocked {
    background: #1e2a1e;
    border-color: #2e5233;
    color: #7fd47f;
}

/* Подпись титула на плитке подкатегории */
.sub-title-line {
    display: block;
    font-size: 11px;
    opacity: .55;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sub-title-line.unlocked {
    color: #7fd47f;
    opacity: 1;
}
.sub-title-line.unlocked img {
    width: 20px; height: 20px; vertical-align: middle;
}
.sub-title-line.unlocked2 img {
    width: 20px; height: 20px; vertical-align: middle;
}

/* Пометка на топовом достижении */
.ai-title-reward {
    font-size: 12px;
    color: #ffd54f;
    margin-top: 4px;
}
.ai-title-reward b { color: #fff; }
.diablo-btn { position: relative; }

.diablo-btn .badge-pulse {
    position: absolute;
    top: 0px;
    right: 0px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    background: #2f6533;
    color: #ffffff;
    font-size: 11px;
    border-radius: 9px;
    text-align: center;
    font-weight: bold;
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0%,100% {     box-shadow: 0 0 0 0 rgb(184 229 53 / 70%); }
    70%     { box-shadow: 0 0 0 6px rgba(229,57,53,0); }
}


.profile-title {
    margin-left: 5px;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    text-align: left;
    gap: 6px;
    /* margin-top: 4px; */
    font-size: 12px;
    /* font-weight: 600; */
    color: #ffe082;
    text-shadow: 0 0 6px rgba(255, 213, 79, .35);
}
.profile-title img {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.profile-title-chat {
    font-size: 13px; 
    color: #ffe082;
}
.profile-title-chat img {
    width: 15px;
    height: 15px;
    vertical-align: middle;
}


.btn-show-all {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 12px;
    background: #2a3550;
    border: 1px solid #3a4a70;
    border-radius: 6px;
    color: #cfd8ec;
    font-size: 12px;
    cursor: pointer;
}
.btn-show-all:hover { background: #34406a; }

.combo-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
        "label num pct"
        "bar   bar bar";
    column-gap: 10px;
    row-gap: 4px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: 12px;
    align-items: center;
}
.combo-item:last-child { border-bottom: none; }

.combo-item .ci-label {
    grid-area: label;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.combo-item .ci-num {
    grid-area: num;
    white-space: nowrap;
    text-align: right;
    opacity: .9;
    font-size: 11px;
}
.combo-item .ci-bar {
    grid-area: bar;
    display: block;
    height: 5px;
    background: rgba(0,0,0,.5);
    border-radius: 3px;
    overflow: hidden;
}
.combo-item .ci-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    transition: width .3s;
}
.combo-item .ci-pct {
    grid-area: pct;
    font-weight: 700;
    color: #a5d6a7;
    min-width: 42px;
    text-align: right;
}


/* ============================================
   СТРАНИЦА ТИТУЛОВ — вертикальные карточки
   ============================================ */

/* Сетка — 2 колонки */
.titles-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 12px;      /* верхний отступ больше — под иконку */
    margin-top: 30px;    /* отступ сверху для «вылезающих» иконок */
    padding: 0 4px;
}

/* Карточка */
.title-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 10px 12px;   /* сверху место под иконку */
    background: #1e1f26;
    border: 1px solid #2c2f39;
    border-radius: 10px;
    transition: border-color .15s, background .15s, transform .15s;
    min-width: 0;
}
.title-item:hover {
    border-color: #3a4a70;
    background: #23262f;
    transform: translateY(-2px);
}
.title-item.locked {
    opacity: .6;
}
.title-item.locked:hover {
    opacity: .8;
}
.title-item.open {
    border-color: #2e5233;
    background: #1a231a;
}

/* Иконка — по центру верхней линии */
.ti-icon {
    position: absolute;
    top: -20px;                       /* половина вылезает вверх */
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #14151a;
    border: 2px solid #2c2f39;
    border-radius: 50%;
    z-index: 1;
}
.title-item.open .ti-icon {
    border-color: #2e5233;
}
.title-item.locked .ti-icon {
    filter: grayscale(.6);
}
.ti-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

/* Название — новая строка, по центру */
.ti-name {
    font-size: 12px;
    font-weight: 600;
    color: #cfd8ec;
    overflow-wrap: anywhere;
    text-align: center;
}
.title-item.open .ti-name {
    color: #66d9ff;
}

/* Кнопка / метка / замок — третья строка, прижата вниз */
.title-item form,
.title-item .ti-active,
.title-item .ti-locked {
    margin-top: auto;      /* прижимает к низу карточки */
}

.title-item form {
    display: inline-flex;
}

.title-item .btn-small {
    padding: 5px 14px;
    font-size: 11px;
    white-space: nowrap;
}

.ti-active {
    color: #4caf50;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.ti-locked {
    font-size: 18px;
    opacity: .5;
}

/* ============================================
   Активный титул сверху
   ============================================ */
.active-title-box {
    padding: 12px 14px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #1a2a1a 0%, #0f1a0f 100%);
    border: 1px solid #2e5233;
    border-radius: 10px;
    color: #cfe0ff;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.active-title-box b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 15px;
    margin: 0 6px;
}
.active-title-box .muted {
    opacity: .55;
    font-size: 13px;
}
.active-title-box form {
    display: inline-block;
    margin-left: 8px;
}

.btn-small {
    padding: 5px 12px;
    background: #3949ab;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s;
}
.btn-small:hover { background: #4a5ac9; }
.btn-small:active { background: #2c3878; }