/* Bebas Neue / Dela Gothic One — захостовано локально (без залежності від fonts.googleapis.com) */
@font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('font/bebasneue-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('font/bebasneue-latinext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Dela Gothic One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('font/delagothicone-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Dela Gothic One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('font/delagothicone-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Dela Gothic One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('font/delagothicone-latinext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Font2';
    src: url('font/font2.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'BossDraftFont';
    src: url('font/DRAFT.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'LjTurtle';
    src: url('font/ljTurtle.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'KatanaBold';
    src: url('font/Katana_Bold.ttf') format('truetype');
    font-display: swap;
}

/* 🔒 Заборона масштабування і скролу */
/* 🔒 Заборона масштабування і скролу */
html, body {
    margin: 0;
    padding: 0;
    background: #1e1e1e;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: 'Verdana', sans-serif;

    /* ⛔ Заборона масштабування */
    zoom: 1;
    touch-action: manipulation; /* дозволяє тап, блокує пінч-зум */
    -ms-content-zooming: none;
    -webkit-text-size-adjust: none;
    -webkit-user-scalable: none;
    user-scalable: no;

    /* ⛔ Заборона виділення тексту/картинок — включно з модалками поза .game-container */
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

body img {
    -webkit-user-drag: none;
    user-drag: none;
}


/* 🧱 Контейнер з фіксованим розміром гри */
.game-container {
    width: 1024px;
    height: 768px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #2d2d2d;
    overflow: hidden;
    box-shadow: 0 0 20px #000;
    pointer-events: auto;
}

/* 🧩 Основна обгортка інтерфейсу */
.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 🔼 Верхня панель — Тюряга style */
/* Висота верхньої панелі — одна змінна; сцени під панеллю рахують відступ від неї */
:root { --tp-h: 40px; }

/* Сцени Полігон / Взводи / Battle Pass / Бойові дії починаються одразу під панеллю
   (top: var(--tp-h)), але їхні координати всередині зняті з PSD як psd_Y - 50.
   Тому весь вміст зсуваємо вниз на різницю — він лишається на місці відносно
   канви 1024×768, а фон, що виходить угору, заповнює смугу під панеллю. */
.tn-inner > *, .clan-modal-inner > *, .bp-inner > *, .cb-inner > * {
    translate: 0 calc(50px - var(--tp-h));
}
/* Взводи: #clans-body має overflow:hidden — зсунутий ЦІЛИМ, він обрізав фон
   .cv-bg по своєму (зсунутому) верху, і під панеллю лишалась смуга в 10px.
   Тому зсуваємо не сам #clans-body, а вміст .cv-scene всередині нього: кліп
   лишається рівно під панеллю, а .cv-bg (top:-50px) заповнює смугу. */
.clan-modal-inner > #clans-body:has(.cv-scene) { translate: none; }
.cv-scene > * { translate: 0 calc(50px - var(--tp-h)); }

.top-panel {
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, #4a2c0e 0%, #261508 65%, #1c1006 100%);
    border-bottom: 2px solid #6b3c12;
    padding: 0;
    height: var(--tp-h);
    gap: 0;
    position: relative;
    z-index: 10001;
    color: white;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,200,100,0.08);
}

/* ── Кнопки "Купити" під верхньою панеллю → преміум-магазин ──
   КООРДИНАТИ ТУТ: --x / --y — лівий верхній кут кнопки відносно верхньої
   панелі (px). За замовчуванням — по центру під слотами A і B
   (центри слотів 616.5 і 771.5, мінус половина ширини кнопки 63.5). */
.tp-buy-btn--1 { --x: 553px; --y: var(--tp-h); }
.tp-buy-btn--2 { --x: 708px; --y: var(--tp-h); }

.tp-buy-btn {
    position: absolute; left: var(--x); top: var(--y);
    width: 127px; height: 22px;            /* реальний розмір img/hud/btnHUD.png */
    min-height: 0; box-sizing: border-box; /* мобільне правило button{min-height:40px} розтягувало б */
    padding: 0; border: none; z-index: 1;  /* нижче за дропдауни слотів (9999) і тултіпи (300) */
    background: url('img/hud/btnHUD.webp') 0 0 / 127px 22px no-repeat;
    font-family: 'Bebas Neue', sans-serif; font-size: 14px; letter-spacing: 1px; line-height: 22px;
    color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.75);
    cursor: pointer; transition: filter 0.15s ease;
}
.tp-buy-btn:hover { filter: brightness(1.12); }
.tp-buy-btn:active { filter: brightness(0.92); }

/* XP смуга всередині identity */
.tp-xp-strip {
    width: 100%;
    height: 5px;
    background: rgba(0,0,0,0.45);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 2px;
    flex-shrink: 0;
}
.tp-xp-strip > div {
    height: 100%;
    background: linear-gradient(90deg, #b85000, #ff8800, #ffe040);
    border-radius: 3px;
    transition: width 0.4s ease;
    box-shadow: 0 0 4px rgba(255,140,0,0.6);
}

/* Герб взводу */
.tp-emblem-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 54px;
    flex-shrink: 0;
    border-right: 1px solid #3a2010;
    padding: 3px 6px;
    height: calc(100% - 3px);
    box-sizing: border-box;
    position: relative;
}
.tp-emblem-wrap img { display: block; border-radius: 3px; margin: 0 auto; position: relative; top: 5px; }
.tp-emblem-tag {
    font-size: 10px;
    font-weight: bold;
    color: #ffc040;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 48px;
    text-overflow: ellipsis;
    text-align: center;
    z-index: 5000;
}
.tp-clan-level {
    /* Фіксоване коло (не "пігулка" на padding) — інакше 2-значні числа (10+)
       розтягують форму в овал. Позиціоновано по центру внизу відносно герба
       (.tp-emblem-wrap — position:relative), а не в потоці flex-колонки. */
    position: absolute;
    left: 50%;
    bottom: -3px;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    background: linear-gradient(135deg, #fcfbfb, #fcfcfc);
    color: #070707;
    font-size: 10px;
    font-weight: 1900;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.5px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.7);
    border: 1px solid rgba(248, 246, 246, 0.712);
    text-align: center;
    z-index: 10001;
    top: var(--y,37px);
}
.tp-emblem-wrap.empty { visibility: hidden; }

/* Гравець: ім'я + рівень + xp */
.tp-identity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 6px 12px 5px;
    border-right: 1px solid #3a2010;
    height: 100%;
    width: 155px;
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
    overflow: hidden;
}
.tp-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.tp-clan-tag {
    color: #ffc040;
    font-weight: bold;
    font-size: 8px;
    white-space: nowrap;
}
.tp-clan-tag:not(:empty)::before { content: '['; }
.tp-clan-tag:not(:empty)::after  { content: ']'; }
.tp-username {
    color: #ffe8b0;
    font-weight: bold;
    font-size: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 115px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.tp-rename-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    padding: 0 2px;
    opacity: 0.4;
    line-height: 1;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.tp-rename-btn:hover { opacity: 1; }

.tp-lvl-row {
    font-size: 11px;
    color: #b08040;
    line-height: 1;
    position: relative;
    top: -3px;
}
.tp-lvl-row span { color: #e0b060; font-weight: bold; }

/* Статистика */
.tp-stats {
    display: flex;
    align-items: center;
    flex: 1;
    height: 100%;
    overflow: visible;
    min-width: 0;
}
.tp-spacer { flex: 1; min-width: 4px; }
.tp-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 20px;
    border-right: 1px solid #3a2010;
    height: 100%;
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
    cursor: default;
    transition: background 0.15s;
    overflow: visible; /* не обрізає тултіп/дропдаун */
}
.tp-stat.has-tooltip:hover { background: rgba(255,160,60,0.06); }
.tp-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(255,200,80,0.25));
    flex-shrink: 0;
}
.tp-stat-val {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    letter-spacing: -0.3px;
}
/* Іконка+число разом як один блок — раніше зсув стояв тільки на #respect
   (тексті), тому іконка лишалась на місці, а число "відпливало" від неї.
   Фіксована ширина — щоб плашка не розтягувалась і не зсувала сусідні
   елементи топ-бару, коли повага виростає до великих чисел (мільйони). */
#tp-stat-respect {
    position: relative;
    left: -0px;
    width: 180px;
    flex-shrink: 0;
    flex-grow: 0;
    justify-content: flex-start;
    padding-left: 6px;
}
/* Енергія — теж фіксована ширина (формат "X / Y" міг би тягнути сусідні
   слоти вправо/вліво при рості чисел). */
#tp-stat-energy {
    width: 150px;
    flex-shrink: 0;
    flex-grow: 0;
}

/* Тултіп */
.tp-tooltip {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: #1a0e06;
    border: 1px solid #5a3010;
    border-radius: 6px;
    padding: 8px 12px;
    min-width: 185px;
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    color: #c8a070;
    font-size: 13px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.8);
    white-space: nowrap;
}
.tp-stat.has-tooltip:hover .tp-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.tp-tt-title {
    color: #ffc040;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #3a2010;
}
.tp-tt-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 2px 0;
}
.tp-tt-row span:last-child { font-weight: bold; color: #ffe0a0; }
.tp-tt-icon { width: 12px; height: 12px; object-fit: contain; vertical-align: middle; margin-right: 2px; }
.tp-item-lbl { display: inline-flex; align-items: center; gap: 4px; }
.tp-tt-divider {
    border-top: 1px solid #3a2010;
    margin: 6px 0 4px;
}
.tp-tt-regen-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 2px 0;
    color: #aed6f1;
    font-size: 11px;
}
.tp-tt-regen-val {
    font-weight: bold;
    font-size: 12px;
    min-width: 28px;
    text-align: right;
    transition: color .3s;
}
.tp-tt-prog-bar {
    height: 4px;
    background: #2a1808;
    border-radius: 2px;
    margin-top: 5px;
    overflow: hidden;
}
.tp-tt-prog-bar > div {
    height: 100%;
    background: linear-gradient(90deg, #c07000, #ff9000);
    border-radius: 2px;
    transition: width 0.3s;
}

/* Слоти-дропдауни (стилізовані як tp-stat) */
.tp-slot {
    cursor: pointer;
    user-select: none;
    /* Фіксована ширина (замість flex:1) — щоб слоти не "гуляли" залежно від
       довжини обраного значення (грн/дисципліна/сила тощо мають різну довжину). */
    width: 155px;
    flex-shrink: 0;
    flex-grow: 0;
}
.tp-slot:hover { background: rgba(255,160,60,0.08); }
.tp-slot-emoji { font-size: 16px; line-height: 1; flex-shrink: 0; display:flex; align-items:center; }
.tp-slot-img { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; }
.tp-menu-icon { width: 14px; height: 14px; object-fit: contain; vertical-align: middle; margin-right: 3px; }
.tp-slot-caret { font-size: 9px; opacity: 0.45; margin-left: auto; align-self: center; padding-right: 2px; }
.tp-slot-val {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    letter-spacing: -0.3px;
}
.tp-slot-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0px);
    left: 0;
    z-index: 9999;
    background: #1e0e03;
    border: 1px solid #6b3c12;
    border-radius: 8px;
    width: 145px;
    padding: 5px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.8);
}
.tp-slot-menu.open { display: block; }
.tp-slot-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    margin-bottom: 4px;
    border-radius: 8px;
    background: linear-gradient(180deg, #7a4a2e 0%, #5a3419 100%);
    border: 1px solid rgba(0,0,0,0.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    font-size: 12px;
    color: #d0a060;
    cursor: pointer;
}
.tp-slot-item:last-child { margin-bottom: 0; }
.tp-slot-item:hover { filter: brightness(1.15); }
.tp-slot-item span { font-weight: bold; color: #ffe0a0; }

/* Правий блок */
.tp-right {
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 100%;
    margin-left: auto;
    flex-shrink: 0;
}


/* 🎮 Основна панель */
.main-panel {
    flex: 1;
    display: flex;
    background: var(--player-location, url('img/locations/location/default_c.webp')) center bottom no-repeat;
    /* локації намальовані рівно під канву 1024x768 — без масштабу; низ панелі = низ канви,
       тож "center bottom" кладе картинку точно на канву (верх ховається під топ-панеллю) */
    background-size: 1024px 768px;
    padding: 10px;
}

/* 📋 Бічні панелі */
.right-panel {
    background-color: transparent;
    background-image: url('img/ui/right-panel.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-sizing: border-box;
    font-size: 14px;
}

/* 🔓 Пошук/Досягнення/Premium Store/Квести — лишаються у flex-потоці (місце
   заброньоване, h3 "Локації" й список локацій нікуди не зсуваються), але
   кожна кнопка зсунута відносно top/left (0/0 = без змін). Пошук зсунутий
   нижче (top:524px) — підтверджено робоче значення: кнопка над панеллю
   друзів, решта кнопок локацій лишаються на місці.
   z-index навмисно ПОВТОРЮЄ той самий трюк, що й #bottom-ui-wrapper (панель
   друзів): у звичайному стані трохи вище за неї (1000→1001), а коли якась
   повноекранна сцена (тренування/боси/прогрес/преміум) додає на <body> клас
   .elevate-bottom-bar і піднімає панель друзів до 10000, Пошук піднімається
   разом із нею до 10001 — тому видно і там, і там. Звичайні модалки (квести,
   клани, бої) цей клас НЕ виставляють, тож Пошук і далі коректно ховається
   за ними — фіксований завжди-високий z-index ламав саме це. */
.rp-search-wrap {
    position: relative;
    top: 671px;
    left: -739px;
    z-index: 1001;
    width: 200px;
    height: 35px;
}
body.elevate-bottom-bar .rp-search-wrap {
    z-index: 10001;
}
.rp-btn-search { position: relative; top: 0; left: 0; }
/* Реферальна кнопка "Призов" — праворуч від Пошуку. Два класи — бо базовий
   .button-overlay { position: relative } записаний нижче у файлі й перебивав absolute. */
.rp-search-wrap .rp-btn-invite { position: absolute; top: 0; left: 208px; }
.rp-btn-invite > span { white-space: nowrap; }
.rp-btn-achievements {
    position: relative;
    top: 0;
    left: 0;
}
.rp-btn-premium      {
    position: relative;
    top: 0;
    left: 0;
}
.rp-btn-quests-wrap  {
    position: relative;
    top: 0;
    left: 0;
}

.right-panel h3 {
    margin: 0 0 6px 0;
    font-size: 16px;
}

.right-panel .location-btn {
    font-size: 14px;
    padding: 8px;
}



/* 👤 Центр */
.center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 👕 Персонаж */
.character-wrap img.character {
    width: 350px;
    height: auto;
}

/* 🎯 Кнопки тренувань */
.training-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 5px;
}

.training-buttons button {
    background: #444;
    border: 2px solid #222;
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    transition: transform 0.1s;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.training-buttons button:hover {
    background: #666;
    transform: scale(1.05);
}
.training-buttons button img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* 🎒 Інвентар */
.bottom-panel {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 10px;
    flex-wrap: wrap;
}

.polk-slot {
    width: 60px;
    height: 60px;
    /*background-color: #5a4a3a;*/
   /* border: 2px solid #2d1c0f;*/
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transform: translate(-710px, -10px); /* ◀️ вліво і вгору */
}

.polk-slot img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* 📢 Плаваючий текст */
.resource-float {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -20px;
    color: #0f0;
    font-weight: bold;
    font-size: 16px;
    animation: floatUp 1s ease-out forwards;
    pointer-events: none;
    z-index: 10;
}

@keyframes floatUp {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-30px); }
}

#leaderboard-panel table {
    border-collapse: collapse;
    width: 100%;
    background: #333;
    color: white;
}

#leaderboard-panel th, #leaderboard-panel td {
    padding: 10px;
    border-bottom: 1px solid #555;
}

#leaderboard-panel th {
    background: #444;
    font-size: 16px;
    text-transform: uppercase;
    color: gold;
}

.leader-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.stage-leader {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;       /* Додаємо позиціонування */
    top: 3px;                 /* Можеш змінити значення */
    left: 170px;                /* Можеш змінити значення */
}

.leader-points{
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    top: 3px;
}

.icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}


.bottom-hud {
    position: relative;
    width: 100%;
    height: 76px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 28px;
    /* Сам контейнер прозорий і ширший за свої 4 кнопки — без цього порожні
       проміжки між ними (і по краях) перехоплюють кліки на все, що під ними,
       щойно #bottom-ui-wrapper піднятий вище (напр. на .pf-scene). Кнопки
       нижче повертають собі клікабельність окремо. */
    pointer-events: none;
}

.bottom-hud button {
    position: relative;
    top: 53px;
    background: transparent;
    border: none;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s;
    pointer-events: auto;
}

.bottom-hud button:hover {
    transform: scale(1.1);
    filter: brightness(1.15);
}

.bottom-hud button img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

#leaderboard-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
    background: #222;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px #000;
}
.dropdown-content {
    display: none;
}

.dropdown.show .dropdown-content {
    display: block;
}
/* ===== SHOP MODAL REDESIGN ===== */
.sp-modal {
    width: 640px;
    max-height: 88vh;
    background: linear-gradient(160deg, #141820 0%, #0e1218 100%);
    border: 1px solid rgba(200, 160, 80, 0.30);
    border-radius: 14px;
    box-shadow: 0 8px 48px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    background: linear-gradient(90deg, rgba(180,130,50,0.15) 0%, transparent 100%);
    border-bottom: 1px solid rgba(200,160,80,0.18);
    flex-shrink: 0;
}

.sp-title {
    color: #e8c870;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 2px;
    text-shadow: 0 0 12px rgba(232,200,112,0.35);
}

.sp-close-x {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #8b9aa7;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-close-x:hover { background: rgba(220,60,60,0.25); border-color: rgba(220,60,60,0.4); color: #fff; }

.sp-tabs {
    display: flex;
    gap: 6px;
    padding: 12px 20px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-tabs .tab-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    color: #8b9aa7;
    padding: 7px 18px;
    border-radius: 8px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: 0.15s;
}
.sp-tabs .tab-btn:hover { color: #d8e1e8; border-color: rgba(200,160,80,0.3); }
.sp-tabs .tab-btn.active {
    background: rgba(200,150,50,0.20);
    border-color: rgba(200,150,50,0.50);
    color: #e8c870;
}

.sp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px 20px;
    overflow-y: auto;
    max-height: 420px;
    flex: 1;
}
.sp-grid::-webkit-scrollbar { width: 6px; }
.sp-grid::-webkit-scrollbar-track { background: transparent; }
.sp-grid::-webkit-scrollbar-thumb { background: rgba(200,160,80,0.25); border-radius: 3px; }

.sp-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 14px 10px 12px;
    text-align: center;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: default;
}
.sp-item:hover {
    background: rgba(200,160,80,0.08);
    border-color: rgba(200,160,80,0.30);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.sp-item-img {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.25);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
}
.sp-item-img img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.sp-item-name {
    color: #d8e1e8;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-item-price {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #e8c870;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.5px;
}
.sp-coin-img { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; }

.sp-buy-btn {
    background: linear-gradient(135deg, #c8a030, #9a7020);
    border: 1px solid rgba(232,200,112,0.40);
    color: #fff;
    padding: 5px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}
.sp-buy-btn:hover { filter: brightness(1.2); transform: scale(1.02); }
.sp-buy-btn:active { transform: scale(0.97); }

.sp-footer {
    padding: 12px 20px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sp-close-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #8b9aa7;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: 0.15s;
}
.sp-close-btn:hover { background: rgba(255,255,255,0.10); color: #d8e1e8; border-color: rgba(255,255,255,0.22); }

/* ===== BUY MODAL ===== */
.buy-modal-box {
    background: linear-gradient(160deg, #141820 0%, #0e1218 100%);
    border: 1px solid rgba(200,160,80,0.30);
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.85);
    width: 300px;
    overflow: hidden;
    font-family: 'Bebas Neue', sans-serif;
    text-align: center;
}
.buy-modal-header {
    padding: 14px 20px 12px;
    background: rgba(180,130,50,0.12);
    border-bottom: 1px solid rgba(200,160,80,0.18);
}
.buy-modal-title {
    color: #e8c870;
    font-size: 18px;
    letter-spacing: 1px;
    margin: 0;
}
.buy-modal-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.buy-modal-label { color: #8b9aa7; font-size: 13px; letter-spacing: 0.5px; }
.buy-modal-input {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(200,160,80,0.35);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 16px;
    width: 80px;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
}
.buy-modal-input:focus { outline: none; border-color: rgba(200,160,80,0.6); }
.buy-modal-result { color: #a8c8a8; font-size: 13px; min-height: 18px; font-family: sans-serif; }
.buy-modal-footer {
    padding: 12px 20px 16px;
    display: flex;
    gap: 10px;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.buy-modal-confirm {
    background: linear-gradient(135deg, #c8a030, #9a7020);
    border: none;
    color: #fff;
    padding: 8px 20px;
    border-radius: 7px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: 0.15s;
}
.buy-modal-confirm:hover { filter: brightness(1.2); }
.buy-modal-cancel {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #8b9aa7;
    padding: 8px 16px;
    border-radius: 7px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    cursor: pointer;
    transition: 0.15s;
}
.buy-modal-cancel:hover { background: rgba(220,60,60,0.20); color: #fff; border-color: rgba(220,60,60,0.35); }

/* Legacy - keep for compatibility */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.shop-item {
    background: #333;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 10px #000;
}

.shop-item img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 10px;
}

.shop-item button {
    margin-top: 8px;
    padding: 6px 10px;
    background: #e7c38d;
    border: 2px solid #5c3b1e;
    border-radius: 6px;
    color: #2d1c0f;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.shop-item button:hover {
    background: #c5934b;
}
#inventory-items .item {
    width: 64px;
    height: 64px;
    position: relative;
    border: 2px solid #555;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1a1a;
}

#inventory-items .item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#inventory-items .item .qty {
    position: absolute;
    bottom: 2px;
    right: 4px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    justify-items: center;
    align-items: center;
}

.inventory-grid .item {
    position: relative;
    width: 60px;
    height: 60px;
    background-color: #444;
    border: 2px solid #888;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-grid .item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 2px solid #555;
    border-radius: 8px;
    background: #1e1e1e;
}

.inventory-grid .item .qty {
    position: absolute;
    bottom: -12px;
    right: 0;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: #222;
    padding: 2px 6px;
    border-radius: 8px;
}

@keyframes highlightNew {
    0%   { box-shadow: 0 0 10px 3px lime; }
    50%  { box-shadow: 0 0 20px 6px lime; }
    100% { box-shadow: 0 0 10px 3px lime; }
}

.item.new {
    animation: highlightNew 1.5s ease-in-out;
}

.inventory-grid .item:hover {
    transform: scale(1.1);
    border-color: gold;
    box-shadow: 0 0 10px gold;
    z-index: 2;
}

.inventory-grid .item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.inventory-grid .qty {
    position: absolute;
    bottom: 2px;
    right: 4px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 4px;
}
.item.highlight {
    animation: pulse 1.2s ease-in-out 2;
    box-shadow: 0 0 10px 3px #00ff99;
}

/* Екіпований предмет — знак що можна зняти */
.item-equipped { position: relative; }
.item-unequip-badge {
    position: absolute;
    top: 2px; right: 2px;
    background: rgba(220, 50, 50, 0.85);
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    width: 14px; height: 14px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    z-index: 2;
    line-height: 1;
}

@keyframes pulse {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1);   opacity: 1; }
}

body.fighting-boss .main-panel {
    background: var(--player-location, url('img/locations/location/default_c.webp')) center bottom no-repeat !important;
    background-size: 1024px 768px;
}
/* Нижня панель (друзі/рейтинг) не має показуватись поверх бою з босом */
body.fighting-boss #bottom-ui-wrapper {
    display: none;
}
/* ...але якщо поверх бою відкрита повноекранна сцена (Прогрес/таланти через 🎓),
   вона сама вмикає .elevate-bottom-bar — тоді панель має бути, як і поза боєм */
body.fighting-boss.elevate-bottom-bar #bottom-ui-wrapper {
    display: block;
}
/* Поверх модалки атаки боса (.pf-scene, z-index:9999) стрічку друзів лишаємо
   видимою — так само, як на екрані "ОБЕРИ БОСА" (там її підіймає
   .elevate-bottom-bar) — тому й тут піднімаємо z-index вище pf-scene. */
body.prefight-open #bottom-ui-wrapper {
    z-index: 10000;
}
/* Сучасний браузерний скрол */
#boss-panel::-webkit-scrollbar {
    width: 16px;
}

#boss-panel::-webkit-scrollbar-track {
    background: transparent;
}

#boss-panel::-webkit-scrollbar-thumb {
    background: url('img/ui/scroll-thumb.webp') no-repeat center center;
    background-size: contain;
    border-radius: 8px;
    position: relative;
}

/* Boss close button — inside .bsp-header */
#boss-close-btn {
    position: absolute;
    top: 50%; right: 12px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0;
    width: 32px; height: 32px;
    cursor: pointer;
    z-index: 1000;
    transition: filter 0.15s;
}
#boss-close-btn:hover { filter: brightness(1.4) drop-shadow(0 0 4px #f05050); }
#boss-close-btn img { width: 100%; height: auto; display: block; }

#boss-selection-panel::-webkit-scrollbar {
    width: 14px;
}

#boss-selection-panel::-webkit-scrollbar-track {
    background: transparent;
}

#boss-selection-panel::-webkit-scrollbar-thumb {
    background: url('img/ui/scroll-thumb.webp') no-repeat center;
    background-size: contain;
    border-radius: 10px;
}

#damage-float-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
}

.damage-float {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translateX(-50%);
    color: #ff3322;
    font-size: 28px;
    font-weight: 900;
    text-shadow: 0 0 12px rgba(255,50,0,0.7), 1px 1px 0 #000;
    animation: floatUp 1.1s ease-out forwards;
    pointer-events: none;
}
.damage-float.crit {
    color: #ffd700;
    font-size: 44px;
    text-shadow: 0 0 20px #ff8800, 0 0 40px #ff4400, 1px 1px 0 #000;
    animation: floatUpCrit 1.3s ease-out forwards;
}

@keyframes floatUp {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0px) scale(1); }
    15%  { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1.2); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-80px) scale(0.8); }
}
@keyframes floatUpCrit {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0px) scale(0.7); }
    10%  { opacity: 1; transform: translateX(-50%) translateY(-5px) scale(1.4); }
    30%  { opacity: 1; transform: translateX(-50%) translateY(-20px) scale(1.2); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-110px) scale(0.9); }
}
.boss-bottom-panel {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 80%;
    margin: 20px auto 0;
    gap: 20px;
}

.boss-ranking-panel {
    flex: 1;
    background: rgba(50, 50, 50, 0.8);
    padding: 10px;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    max-width: 45%;
}

.boss-ranking-panel table {
    width: 100%;
    border-collapse: collapse;
    color: white;
}

.boss-ranking-panel th,
.boss-ranking-panel td {
    padding: 6px;
    text-align: center;
    border-bottom: 1px solid #777;
}

.boss-item-bar {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    max-width: 45%;
    background: rgba(40, 40, 40, 0.8);
    padding: 10px;
    border-radius: 10px;
}

.boss-item-bar img {
    width: 48px;
    height: 48px;
    border: 2px solid #666;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}
.boss-item-bar img:hover {
    transform: scale(1.1);
    border-color: gold;
}
/* ===== BOSS FIGHT UI - REDESIGNED ===== */
#boss-fight-ui {
    background: radial-gradient(ellipse at center top, #1a0a08 0%, #060a10 50%, #030508 100%);
    color: white;
}

/* Boss fight animations */
@keyframes bossBreath {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    filter: drop-shadow(0 0 40px rgba(220,60,30,0.35)); }
    50%       { transform: translate(-50%, -52%) scale(1.03); filter: drop-shadow(0 0 55px rgba(220,60,30,0.55)); }
}
@keyframes bossHit {
    0%   { transform: translate(-50%, -50%);  filter: drop-shadow(0 0 40px rgba(220,60,30,0.35)); }
    10%  { transform: translate(-44%, -50%);  filter: drop-shadow(0 0 90px #ff1100) brightness(2.2); }
    25%  { transform: translate(-56%, -50%);  filter: drop-shadow(0 0 90px #ff1100) brightness(2.2); }
    40%  { transform: translate(-47%, -50%);  filter: drop-shadow(0 0 55px rgba(220,60,30,0.7)); }
    60%  { transform: translate(-53%, -50%);  filter: drop-shadow(0 0 55px rgba(220,60,30,0.7)); }
    80%  { transform: translate(-51%, -50%);  filter: drop-shadow(0 0 45px rgba(220,60,30,0.45)); }
    100% { transform: translate(-50%, -50%);  filter: drop-shadow(0 0 40px rgba(220,60,30,0.35)); }
}
@keyframes bossRage {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    filter: drop-shadow(0 0 50px rgba(255,0,0,0.55)); }
    50%       { transform: translate(-50%, -51%) scale(1.025); filter: drop-shadow(0 0 100px rgba(255,0,0,1)); }
}

/* Large centered boss image */
.bfu-boss-img {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    height: 70%;
    max-height: 400px;
    object-fit: contain;
    filter: drop-shadow(0 0 40px rgba(220, 60, 30, 0.35));
    pointer-events: none;
    z-index: 1;
    animation: bossBreath 3s ease-in-out infinite;
}
.bfu-boss-img.boss-rage {
    animation: bossRage 0.85s ease-in-out infinite;
}
.bfu-boss-img.boss-hit {
    animation: bossHit 0.45s ease-out forwards;
}

/* Damage floats overlay */
.bfu-dmg-wrap {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 15;
}

/* Bottom zone - full width strip. Нативний розмір boss_panel_bg.webp — 1024×250,
   без розтягування (game-container сам 1024px завширшки, тому збігається). */
.bfu-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 250px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 6px;
    z-index: 20;
    background: url('img/bosses/hud/boss_panel_bg.webp') bottom center / 1024px 250px no-repeat;
}

/* Side panels (рейтинг + таланти) — нативний розмір boss_panel.webp: 212×222,
   ширину блоку підігнано під нього, щоб текстура не обрізалась і не тягнулась. */
.bfu-side {
    flex: 0 0 212px;
    box-sizing: border-box;
    background: url('img/bosses/hud/boss_panel.webp') center / 212px 222px no-repeat;
    border: none;
    border-radius: 0;
    padding: 14px 10px 8px;
    /* Темний текст замість світло-блакитного — на оливковому пергаменті
       світлі холодні кольори губляться, темно-коричневий чіткий скрізь. */
    color: #2a1808;
    font-size: 12px;
    max-height: 222px;
    overflow-y: auto;
}

/* Center panel - attack + items */
.bfu-mid {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Items row */
.bfu-items-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    background: rgba(8, 12, 20, 0.85);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 6px 8px;
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
}

/* Attack button */
.bfu-atk-btn {
    position: relative;
    width: 110px;
    height: 110px;
    background: none;
    border: none;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    flex-shrink: 0;
    transition: transform 0.1s, filter 0.1s;
}
.bfu-atk-btn:hover { transform: scale(1.05); filter: brightness(1.15); }
.bfu-atk-btn:active { transform: scale(0.95); }
.bfu-atk-btn .attack-btn-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.bfu-atk-btn span {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-shadow: 0 1px 4px #000, 0 0 8px rgba(255,80,30,0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    text-align: center;
}

/* Tabs */
.bfu-tabs {
    display: flex;
    gap: 3px;
    margin-bottom: 7px;
}
.bfu-tab {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(187, 120, 5, 0.712);
    border: 1px solid rgba(29, 28, 28, 0.534);
    color: #f8f7f4;
    padding: 3px 2px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    transition: 0.15s;
}
.bfu-tab:hover { color: #2a1808; border-color: rgba(42,24,8,0.5); }
.bfu-tab.bfu-tab-on {
    background: rgba(200, 60, 30, 0.30);
    border-color: rgba(220, 80, 40, 0.55);
    color: #fff;
}

/* Панель рейтингу/подій — фіксований розмір, не "стрибає" від кількості рядків */
#boss-ranking-panel {
    height: 200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#boss-ranking-panel .bfu-tabs { flex-shrink: 0; }
#bfu-tab-rating, #bfu-tab-events {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#bfu-tab-rating::-webkit-scrollbar,
#bfu-tab-events::-webkit-scrollbar { width: 8px; }
#bfu-tab-rating::-webkit-scrollbar-track,
#bfu-tab-events::-webkit-scrollbar-track { background: transparent; }
#bfu-tab-rating::-webkit-scrollbar-thumb,
#bfu-tab-events::-webkit-scrollbar-thumb {
    background: url('img/ui/scrollbar.webp') no-repeat center / cover;
    border-radius: 6px;
    min-height: 24px;
}
#bfu-tab-rating::-webkit-scrollbar-thumb:hover,
#bfu-tab-events::-webkit-scrollbar-thumb:hover { filter: brightness(1.2); }

/* Ranking table */
.bfu-rtable {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.bfu-rtable th {
    color: #f7f5f3;
    font-size: 9px;
    text-transform: uppercase;
    padding: 2px 4px;
    border-bottom: 1px solid rgba(42,24,8,0.25);
    font-weight: 600;
    letter-spacing: 0.5px;
}
.bfu-rtable td {
    padding: 3px 4px;
    border-bottom: 1px solid rgba(42,24,8,0.12);
    color: #2a1808;
}
.bfu-rtable tr:first-child td { color: #f7f6f5; font-weight: 700; }

/* Events list */
.bfu-evlist {
    font-size: 11px;
    color: #4a3410;
    line-height: 1.7;
}
.bfu-ev-row {
    padding: 1px 2px;
    border-bottom: 1px solid rgba(42,24,8,0.18);
    color: #3a2408;
}
.bfu-ev-row:first-child { color: #a85a00; font-weight: 700; }
.bfu-ev-row.bfu-ev-own { color: #7fe0a0; font-weight: bold; }
.bfu-ev-row.bfu-ev-sync { color: #c89aff; }
.bfu-ev-sync-label { font-size: 10px; opacity: .7; font-style: italic; }

/* Talents panel */
.bfu-tal-hdr {
    color: #f8f7f7;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    text-align: center;
    border-bottom: 1px solid rgba(42,24,8,0.3);
    padding-bottom: 4px;
}
.bfu-act-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.bfu-act-btn {
    background: rgba(20,14,4,0.20);
    border: 1px solid rgba(42,24,8,0.35);
    border-radius: 8px;
    padding: 7px 6px;
    font-size: 18px;
    cursor: pointer;
    transition: 0.15s;
    color: #2a1808;
    line-height: 1;
    text-align: center;
}
.bfu-act-btn:hover {
    background: rgba(20,14,4,0.32);
    border-color: rgba(42,24,8,0.5);
    transform: scale(1.06);
}
.bfu-act-btn:active { transform: scale(0.95); }
.boss-top-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 100;
}

.boss-hp-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 280px;
    position: relative;
}

/* Рядок з ім'ям боса й круглою кнопкою "оновити" */
.bhb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.bhb-boss-name {
    margin: 0;
    color: #ff5a3c;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#refresh-boss-hp {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffd478 0%, #f5a623 55%, #d97e0a 100%);
    border: 2px solid #a85f06;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.5);
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}
#refresh-boss-hp img {
    width: 15px;
    height: 15px;
}
#refresh-boss-hp:hover { transform: rotate(90deg); }

/* Спільний вигляд "піґулок" HP/таймера — біла рамка-контейнер, заливка кольором всередині */
.boss-hp-bar,
.boss-timer-bar-wrap {
    position: relative;
    width: 100%;
    height: 26px;
    background: #fff;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 999px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    overflow: hidden;
}

/* Заливка — всередині білої рамки (inset:0 рахується від краю padding-box) */
#boss-hp-fill,
#boss-timer-bar {
    position: absolute;
    inset: 0;
    height: 100%;
    border-radius: 999px;
}

/* Колір заливки рахує JS (плавний перехід зелений → червоний залежно від %) */
#boss-hp-fill {
    width: 100%;
    transition: width 0.3s, background 0.3s;
}
#boss-timer-bar {
    width: 100%;
    transition: width 1s linear, background 1s linear;
}

/* Іконка-бейдж збоку піґулки — біле коло як на референсі */
.bhb-icon-badge {
    position: absolute;
    top: 50%; left: 3px;
    transform: translateY(-50%);
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}
.bhb-icon-badge img {
    width: 12px;
    height: 12px;
}

/* Текст поверх піґулки (HP: X / Y, таймер) — з відступом під бейдж зліва */
.bhb-bar-text {
    position: absolute;
    top: 50%; left: 26px; right: 6px;
    transform: translateY(-50%);
    z-index: 2;
    text-align: center;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    /* контур, щоб читалось і на зеленій заливці, і на білому краю */
    text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 2px rgba(0,0,0,0.9);
    pointer-events: none;
}
#boss-exit-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    z-index: 100;
    transition: transform 0.2s ease;
}

#boss-exit-btn:hover {
    transform: scale(1.1);
}
#bottom-wrapper {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#upgrade-panel {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 8px;
    background: #1f1f1f;
    border-radius: 12px;
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

#friends-bar {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    gap: 6px;
    padding: 8px 12px;
    background: #1a1a1a;
    border-radius: 12px;
    box-shadow: 0 0 6px rgba(0,0,0,0.5);
    min-height: 72px;
    max-width: 100%;
    width: 100%;
    /* Скрол лишається робочим (кнопки ◀▶ гортають через scrollBy),
       але сама смуга прокрутки прихована — вона тут не потрібна. */
    scrollbar-width: none;
    align-items: center;
    box-sizing: border-box;
}

#friends-bar::-webkit-scrollbar {
    display: none;
}

.fb-empty {
    color: #a08050;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    padding: 6px 12px;
    align-self: center;
}

/* === Слот друга === */
.friend-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 3px 4px;
    min-width: 54px;
    cursor: pointer;
    background: url('img/hud/player.webp') top center / 70px 70px no-repeat;
    border-radius: 8px;
    flex-shrink: 0;
    transition: filter 0.15s;
}
.friend-slot:hover {
    filter: brightness(1.15);
}

/* Фото прив'язане до вирізу в рамці player.webp (квадратне вікно ~50×50, відступ 10px від країв рамки) */
.friend-slot-avatar {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    border-radius: 0;
    object-fit: cover;
    display: block;
}

.friend-slot-name {
    margin-top: 66px; /* звільняє місце під рамкою (70px), бо аватар тепер position:absolute й не займає потік */
    font-family: 'Bebas Neue', 'Arial', sans-serif;
    font-size: 11px;
    color: #c8b860;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    max-width: 54px;
    text-overflow: ellipsis;
    line-height: 1.1;
}

/* === Номер слота (порядковий номер друга в панелі) === */
.friend-slot-num {
    position: absolute;
    top: 60px;
    min-width: 15px;
    height: 15px;
    padding: 0 2px;
    box-sizing: border-box;
    border-radius: 50%;
    color: #fff;
    font-family: 'Bebas Neue', 'Arial', sans-serif;
    font-size: 14px;
    line-height: 13px;
    text-align: center;
    z-index: 3;
    pointer-events: none;
}

/* === Корона над аватаром === */
.friend-crown-icon {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
}
.crown-gold {
    filter: drop-shadow(0 0 2px #ffd700);
}
.crown-silver {
    filter: grayscale(1) brightness(1.6) drop-shadow(0 0 2px #bbb);
}
.crown-bronze {
    filter: sepia(1) hue-rotate(340deg) saturate(2) brightness(0.85) drop-shadow(0 0 2px #cd7f32);
}
#bottom-ui-wrapper {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    /* Сам wrapper — лише контейнер-розкладка, без власного видимого вмісту;
       без цього його порожня "рамка" (90% ширини екрана) перехоплює кліки на
       все, що під нею, щойно його підіймають вище (напр. над .pf-scene).
       .bottom-hud вже сам виправляє кнопки; .fb-strip повертає собі auto. */
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 1000;
    overflow: visible;
}
/* Тільки на вкладках Боси/Тренування панель піднята вище оверлеїв (z-index:9999) — як .top-panel (10001) */
body.elevate-bottom-bar #bottom-ui-wrapper {
    z-index: 10000;
}



/* Стрічка друзів у рамці Turya (bgFriend.webp) зі стрілками навігації */
.fb-strip {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 111.111%;
    margin-left: -0.1%;
    min-height: 145px;
    box-sizing: border-box;
    background: url('img/hud/bgFriend.webp') center / cover no-repeat;
    border-radius: 10px;
    padding: 4px 8px;
    pointer-events: auto; /* #bottom-ui-wrapper вище — none, повертаємо тут */
}
.fb-strip #friends-bar {
    flex: 1;
    background: transparent;
    box-shadow: none;
    position: relative;
    top: 6px;
}
.fb-arrow {
    flex-shrink: 0;
    width: 26px; height: 26px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: 0.85;
    transition: opacity 0.15s, transform 0.1s;
}
.fb-arrow:hover { opacity: 1; transform: scale(1.1); }
.fb-arrow img { width: 100%; height: 100%; object-fit: contain; }
.fb-arrow-end { width: 20px; height: 20px; }

/* Пошук + "Авторитети/Друзі/Еженед.Топ" */
.bottom-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}
.ba-search {
    flex-shrink: 0;
    width: 40px; height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.ba-search img { width: 100%; height: 100%; object-fit: contain; }
.ba-search:hover { filter: brightness(1.1); }
.ba-pill {
    flex: 1;
    height: 36px;
    background: url('img/hud/btnPill.webp') center / 100% 100% no-repeat;
    border: none;
    color: #2a1c04;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: filter 0.15s;
}
.ba-pill:hover { filter: brightness(1.08); }

/* Декоративний віджет "Розшук" (порт з Turya) */
#wanted-widget {
    position: absolute;
    right: var(--y, 2%);
    bottom: var(--y, 90px);
    width: 130px;
    z-index: 1000;
}
.ww-bg { width: 100%; display: block; }
.ww-btn {
    position: absolute;
    left: 50%; bottom: 6px;
    transform: translateX(-50%);
    width: 60%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.ww-btn img { width: 100%; display: block; }
.ww-btn:hover { filter: brightness(1.08); }

.friends-bar {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding: 6px 10px;
    background: #111;
    border-radius: 10px;
    min-height: 52px;
    max-width: 100%;
    width: 100%;
    scrollbar-width: none;
}

.friends-bar::-webkit-scrollbar {
    display: none;
}

.friend-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #888;
    object-fit: cover;
    transition: transform 0.2s ease;
}
.friend-avatar:hover {
    transform: scale(1.1);
}

#exp-bar-fill {
    background: linear-gradient(to right, orange, red);
    height: 100%;
    width: 0%;
    transition: width 0.3s ease-in-out;
}

#exp-text {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    line-height: 20px;
}
.stat-selector {
    display: flex;
    gap: 6px;
}
.stat-selector button {
    background: #3a2d1f;
    color: white;
    border: 2px solid #6a4d2f;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
}
.stat-selector button:hover {
    background: #6a4d2f;
}
.dropdown {
    position: relative;
    display: inline-block;
    margin-left: 10px;
}

.dropbtn {
    background-color: #3a2d1f;
    color: white;
    padding: 8px 12px;
    font-size: 14px;
    border: 2px solid #6a4d2f;
    border-radius: 6px;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #2e2e2e;
    min-width: 160px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.3);
    z-index: 1000;
    border: 2px solid #6a4d2f;
    border-radius: 6px;
    overflow: hidden;
}

.dropdown-content button {
    background-color: transparent;
    color: white;
    padding: 10px 12px;
    width: 100%;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
}

.dropdown-content button:hover {
    background-color: #444;
}

.dropdown.show .dropdown-content {
    display: block;
}
.dropdown select {
    background-color: #3a2d1f;
    color: white;
    padding: 6px 10px;
    font-size: 14px;
    border: 2px solid #6a4d2f;
    border-radius: 6px;
    cursor: pointer;
}
.dropdown select option {
    background-color: #2e2e2e;
    color: white;
}

.stat-value-box {
    background-color: #3a2d1f;
    color: white;
    border: 2px solid #6a4d2f;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 14px;
    display: inline-block;
    margin-left: 10px;
}

#stat-dropdown-select {
    width: 230px; /* або 200px, якщо довші назви */
    font-family: inherit;
    padding: 6px 10px;
    border-radius: 6px;
    border: 2px solid #6a4d2f;
    background-color: #3a2d1f;
    color: white;
    font-size: 14px;
}
/* .boss-card styles moved to the #boss-selection-panel block below */
.boss-card button {
    font-weight: bold;
    font-family: 'Bebas Neue', sans-serif;
}
.attack-btn {
    background: url("img/ui/btn_attack12.webp") center center no-repeat;
    background-size: contain;
    width: 180px;
    height: 64px;
    border: none;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Bebas Neue', sans-serif;
    text-shadow: 2px 2px 4px #000;
    cursor: pointer;
    transition: transform 0.1s ease;
    outline: none;
    position: relative;
    z-index: 10;
}

.attack-btn:hover {
    filter: brightness(1.2);
}

.attack-btn:active {
    transform: scale(0.96);
    filter: brightness(0.9);
}
.attack-boss-btn {
    background: url("img/ui/btn_attack123.webp") center center no-repeat;
    background-size: contain;
    width: 180px;
    height: 60px;
    border: none;
    color: #000000;
    font-size: 20px;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 3px #000;
    cursor: pointer;
    transition: transform 0.1s ease, filter 0.2s;
    margin-top: 8px;
}

.attack-boss-btn:hover {
    filter: brightness(1.2);
}

.attack-boss-btn:active {
    transform: scale(0.96);
    filter: brightness(0.9);
}
.character-wrap { position: relative; width: 300px; height: 400px; }
.character-wrap img { position: absolute; left: 0; top: 0; width: 345px; image-rendering: crisp-edges; }
#char-body { z-index: 1; }
#char-legs { z-index: 2; }
#char-body-armor { z-index: 3; }
#char-head { z-index: 4; }
#char-weapon { z-index: 5; }

.modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: #1a1a1a;
    padding: 20px;
    border-radius: 10px;
    color: white;
    width: 300px;
    text-align: center;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.modal-content input {
    width: 80%;
    padding: 5px;
    margin: 10px 0;
    text-align: center;
}

.modal-actions button {
    background: #28a745;
    border: none;
    color: white;
    padding: 8px 15px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.modal-actions button:last-child {
    background: #dc3545;
}

/* === Character Panel === */
#character-panel {
    display: flex;
    gap: 20px;
    padding: 15px;
    background: rgba(10, 10, 10, 0.9);
    border: 2px solid #3a3a3a;
    border-radius: 12px;
    box-shadow: 0 0 15px #000 inset;
    color: #eee;
    font-family: 'Segoe UI', sans-serif;
}

/* Ліва частина з персонажем */
.char-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Paper-doll зона */
.paper-doll {
    position: relative;
    width: 320px;
    height: 500px;
    background: url("img/ui/character_bg.webp") center/cover no-repeat, #111;
    border: 2px solid #444;
    border-radius: 12px;
    overflow: hidden;
}

.paper-doll .layer {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

/* Кнопки зняття екіпу */
.char-left button {
    margin-top: 8px;
    padding: 5px 10px;
    background: #2d2d2d;
    border: 1px solid #555;
    border-radius: 6px;
    color: #ddd;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.char-left button:hover {
    background: #444;
    color: #fff;
}

/* Права частина з інвентарем */
.char-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Таби категорій */
.tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.tabs button {
    flex: 1;
    padding: 6px 8px;
    font-size: 14px;
    background: #2d2d2d;
    border: 1px solid #555;
    border-radius: 6px;
    color: #ccc;
    cursor: pointer;
    transition: all 0.2s;
}
.tabs button:hover {
    background: #3d3d3d;
    color: #fff;
}
.tabs button.active {
    background: #555;
    color: #fff;
    border-color: #888;
}

/* Список інвентаря */
#inv-list {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    overflow-y: auto;
    padding-right: 4px;
}
#inv-list div {
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid #555;
    border-radius: 8px;
    padding: 5px;
    text-align: center;
    font-size: 12px;
    color: #ddd;
    transition: all 0.2s;
}
#inv-list div:hover {
    border-color: #888;
    background: rgba(40, 40, 40, 0.9);
}

/* Іконки предметів */
#inv-list img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
}

/* Кнопки екіпіровки */
#inv-list button {
    margin-top: 3px;
    padding: 3px 5px;
    font-size: 11px;
    background: #383838;
    border: 1px solid #555;
    border-radius: 4px;
    color: #ccc;
    cursor: pointer;
}
#inv-list button:hover {
    background: #555;
    color: #fff;
}

#character-panel {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #2c2c2c;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px #000;
    z-index: 1000;
    display: none;
    gap: 20px;
    color: white;
}

#boss-selection-panel, #boss-selection-panel * {
    font-family: 'BossDraftFont', 'Bebas Neue', sans-serif !important;
}
#boss-selection-panel {
    transition: opacity 0.3s ease-in-out;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: url("img/bosses/turya_ui/bossesbgBossesFon.webp") center/cover;
    background-color: #1a1205;
    border-radius: 0;
    box-shadow: none;
    border: none;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: #8a6a20 #2a1e08;
}
#boss-selection-panel::-webkit-scrollbar { width: 8px; }
#boss-selection-panel::-webkit-scrollbar-track { background: #2a1e08; }
#boss-selection-panel::-webkit-scrollbar-thumb { background: #8a6a20; border-radius: 4px; }

/* ======================== INVENTORY PANEL ======================== */
#inventory-panel {
    width: 520px;
    background: linear-gradient(180deg, #2a1e08 0%, #1a1205 100%);
    border: 3px solid #7a6030;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.85), inset 0 0 60px rgba(0,0,0,0.3);
    overflow: hidden;
}
.inv-header {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #4a3008 0%, #2e1e04 100%);
    border-bottom: 3px solid #8a6020;
    padding: 10px 16px; position: relative;
}
.inv-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px; letter-spacing: 3px;
    color: #f0c840;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8), 0 0 12px rgba(240,200,64,0.3);
    text-transform: uppercase;
}
#inv-close-btn {
    position: absolute;
    top: 50%; right: 12px;
    transform: translateY(-50%);
    background: none; border: none;
    cursor: pointer; padding: 0;
    width: 28px; height: 28px;
    transition: filter 0.2s;
}
#inv-close-btn:hover { filter: brightness(1.4) drop-shadow(0 0 4px #f05050); }
#inv-close-btn img { width: 100%; height: auto; display: block; }
.inv-body {
    padding: 16px;
    max-height: 460px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #8a6a20 #2a1e08;
}
.inv-body::-webkit-scrollbar { width: 8px; }
.inv-body::-webkit-scrollbar-track { background: #2a1e08; }
.inv-body::-webkit-scrollbar-thumb { background: #8a6a20; border-radius: 4px; }
/* override inventory-grid inside new panel */
#inventory-panel .inventory-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    justify-items: center;
}
#inventory-panel .inventory-grid .item {
    width: 76px; height: 76px;
    background: linear-gradient(135deg, #3a2a10 0%, #231808 100%);
    border: 2px solid #6a4e20;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    position: relative; cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
#inventory-panel .inventory-grid .item:hover {
    transform: scale(1.08);
    border-color: #f0c840;
    box-shadow: 0 0 10px rgba(240,200,64,0.5);
    z-index: 2;
}
#inventory-panel .inventory-grid .item img {
    width: 52px; height: 52px;
    object-fit: contain;
}
#inventory-panel .inventory-grid .item .qty {
    position: absolute;
    bottom: 2px; right: 4px;
    font-size: 11px; font-weight: bold;
    color: #f0c840;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
#inventory-panel .inventory-grid .item.highlight {
    border-color: #f0c840;
    box-shadow: 0 0 14px rgba(240,200,64,0.6);
    animation: highlightNew 1.5s ease-in-out;
}

/* Header */
.bsp-header {
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-title, url('img/bosses/turya_ui/bsp_title.webp')) center / 1024px 54px no-repeat;
    height: 54px;
    border: none;
    position: relative;
    flex-shrink: 0;
}
.bsp-title { display: none; } /* заголовок тепер запечений у bsp_title(_EN).webp */

#boss-list-scroll {
    flex: 1;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    padding: 4px 6px 230px; /* знизу — щоб останній бос не ховався під #bottom-ui-wrapper (z-index:10000) */
    scrollbar-width: thin;
    scrollbar-color: #8a6a20 #2a1e08;
}
#boss-list-scroll::-webkit-scrollbar { width: 8px; }
#boss-list-scroll::-webkit-scrollbar-track { background: #2a1e08; }
#boss-list-scroll::-webkit-scrollbar-thumb { background: #8a6a20; border-radius: 4px; }
/* ─── Boss Card — "Розшукується" (wanted-poster) ─── */
.boss-card {
    display: flex;
    align-items: stretch;
    background: var(--bg-boss) center / 100% 100% no-repeat, #c4b896;
    border: none;
    border-radius: 6px;
    margin: 10px 40px 0;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    overflow: hidden;
    min-height: 130px;
    font-family: 'Bebas Neue', sans-serif;
    color: #2a2010;
    position: relative;
}

/* Особливо небезпечний — boss 4 */
.boss-card--danger {
    border-color: #a05050;
    box-shadow:
        inset 0 0 20px rgba(140,20,20,0.15),
        0 4px 16px rgba(0,0,0,0.4),
        0 0 0 1px rgba(220,120,120,0.3);
}
.boss-card--danger .bc-portrait {
    background: linear-gradient(160deg, #e0c8c8 0%, #cca8a8 100%);
}
.bc-danger-vert {
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 28px;
    overflow: hidden;
    background: linear-gradient(180deg, #c07a1a, #8a5410);
    box-shadow: 2px 0 6px rgba(0,0,0,0.3);
}
.bc-danger-vert--extreme {
    background: linear-gradient(180deg, #8a1a1a, #c03030);
}
.bc-danger-vert-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
    writing-mode: vertical-rl;
    display: flex; align-items: center; justify-content: center;
    gap: 2px;
    font-size: 10px;
    line-height: 1.05;
    letter-spacing: 0.5px;
    color: #ffe8e8;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
    font-weight: bold;
    white-space: normal;
}

/* ── Portrait column: mugshot ── */
.bc-portrait {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    padding: 8px 8px 6px 34px;
    width: 144px;
    flex-shrink: 0;
    position: relative;
}
.bc-mug-frame {
    width: 80px; height: 91px;
    background: url('img/bosses/turya_ui/bgAvatarBoss1.webp') center / 100% 100% no-repeat;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.bc-img {
    width: 80px; height: 80px;
    object-fit: cover;
    filter: grayscale(0.4) contrast(1.08) brightness(1.02) sepia(0.08);
    display: block;
}
.bc-name-plate {
    background: url('img/bosses/turya_ui/nameBosTable.webp') center / 100% 100% no-repeat;
    color: #2a1c08;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 5px 12px;
    margin-bottom: 6px;
    text-align: center;
    white-space: nowrap;
}

/* ── Reward column: torn note ── */
.bc-reward {
    --rw-anchor: 20%; /* спільна горизонтальна точка прив'язки тікету й вмісту */
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    padding: 14px 16px 10px;
    text-align: center;
    position: relative;
}
.bc-reward::before {
    content: '';
    position: absolute;
    top: 50%; left: var(--rw-anchor);
    transform: translate(-50%, -50%);
    width: 211px;
    height: 175px; /* нативний розмір картинки — без масштабування */
    background: var(--bg-reward) center / 211px 175px no-repeat;
    z-index: 0;
}
.bc-reward > * { position: relative; z-index: 1; }
.bc-reward, .bc-reward * { font-family: 'Courier New', Courier, monospace; }
.bc-rw-content {
    position: absolute;
    left: var(--rw-anchor);
    top: calc(50% - 40px); /* верх тікету (50% - 175/2) + висота запеченого заголовка, трохи нижче */
    transform: translateX(-50%);
    width: 175px; /* вміщається всередині rewardScrollBoss (211px) з відступами */
    display: flex; flex-direction: column; align-items: center;
}
.bc-rw-items {
    width: 100%;
    display: flex; flex-wrap: wrap;
    gap: 4px 10px;
    justify-content: center;
}
.bc-rw-row {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px;
    min-width: 42%;
    justify-content: center;
}
.bc-rw-val { color: #241804; font-size: 15px; font-weight: bold; text-shadow: none; }
.bc-rw-key { color: #4a3410; font-size: 12px; letter-spacing: 0.5px; }
.bc-loc-drop {
    display: flex; align-items: center; gap: 5px;
    width: 100%;
    margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed #8a6a30;
    font-size: 10px; color: #4a3410;
    cursor: default;
}
.bc-loc-drop img { width: 18px; height: 18px; object-fit: contain; }
.bc-loc-drop.owned { display: none; }

/* ── Winner column: bounty plaque ── */
.bc-winner {
    width: 150px; flex-shrink: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    padding: 10px 8px 8px;
    background: transparent;
    text-align: center;
    left: var(--y, -150px);
    position: relative;
}
.bc-w-photo {
    width: 64px; height: 79px;
    background: url('img/bosses/turya_ui/LastWin.webp') left top / 142px 79px no-repeat;
    position: relative;
    margin-bottom: 4px;
}
.bc-w-photo--empty { background-image: url('img/bosses/turya_ui/noWinLast.webp'); }
.bc-w-avatar {
    position: absolute;
    top: 30px; left: 50%;
    transform: translateX(-50%);
    width: 38px; height: 38px;
    border-radius: 3px;
    object-fit: cover;
    display: block;
}
.bc-w-ribbon {
    position: absolute;
    left: -14px; right: -14px;
    top: 40px;
    transform: rotate(-18deg);
    background: linear-gradient(180deg, #a01818, #6a0e0e);
    color: #ffe8e8;
    font-size: 6px;
    font-weight: bold;
    letter-spacing: 0.2px;
    line-height: 1.15;
    padding: 1.5px 0;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.bc-w-name {
    font-size: 12px; color: #2a1c08;
    letter-spacing: 0.5px; margin-bottom: 5px;
    text-shadow: none;
}
.bc-w-name--empty { color: #7a6a48; }
.bc-w-stats {
    display: flex; flex-direction: column; gap: 1px;
    font-size: 10px; color: #3a2c10;
    margin-bottom: 6px;
    text-shadow: none;
}
.bc-medals { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; align-items: center; margin-top: auto; }
.bc-medal { width: 34px; height: 34px; object-fit: contain; transition: filter 0.2s, opacity 0.2s; cursor: help; }
.bc-medal-on  { filter: none; opacity: 1; }
.bc-medal-off { filter: grayscale(1) brightness(0.4) contrast(0.7); opacity: 0.5; }

/* Attack button override for boss cards — big & yellow */
.boss-card .attack-boss-btn {
    background: url('img/bosses/turya_ui/bossbtnNoactiv.webp') center / 100% 100% no-repeat;
    width: 100%; height: 38px;
    font-size: 15px; letter-spacing: 1px;
    color: #2a1c04;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    border: none;
    margin-top: 2px;
}
.boss-card .attack-boss-btn:hover { background-image: url('img/bosses/turya_ui/bossbtnactiv.webp'); }
.boss-card .attack-boss-btn.bc-limited {
    background: url('img/bosses/turya_ui/bossbtnNoactiv.webp') center / 100% 100% no-repeat;
    filter: grayscale(1) brightness(0.8);
    color: #5a4c2c;
    cursor: not-allowed;
}

/* Legacy winner-frame kept for other uses */
.winner-frame {
    width: 64px; text-align: center;
    flex-direction: column; align-items: center; display: flex;
}
.winner-frame .avatar {
    width: 48px; height: 48px; border-radius: 50%;
    border: 2px solid #ffc900; object-fit: cover; margin-bottom: 4px;
}
.winner-frame .label {
    font-size: 12px; color: gold;
    text-shadow: 0 0 3px black; font-weight: bold;
}

.char-layer-wrapper {
    position: relative;
    width: 300px;
    height: 400px;
}

.char-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    pointer-events: none;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 90px);
    gap: 10px;
    justify-content: start;
}

.shop-item {
    text-align: center;
    background: #2d2d2d;
    border: 2px solid #444;
    border-radius: 6px;
    padding: 4px;
}

.shop-item img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 4px;
    image-rendering: pixelated;
}

.shop-item .btn-buy {
    font-size: 12px;
    padding: 2px 5px;
    cursor: pointer;
    background: #5a5;
    border: none;
    border-radius: 4px;
    color: white;
}

.equip-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.equip-tab {
    padding: 6px 12px;
    background: #333;
    border: 1px solid #666;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    font-weight: bold;
}

.equip-tab.active {
    background: #5a5;
    color: black;
}

#char-helmet {
    /* Повнорозмірний шар 1186×880 (img/char/equip/heads/head_N.webp), та сама
       система координат, що й тіло/#char-armor. */
    top: 0px;
    width: 1800px;
    left: -500px;
}

#char-pants {
    top: 900px;
    width: 320%;
    left: 188px;   /* вправо */
}

#char-armor {
    /* Повнорозмірний шар (1186×880, як тіло/штани/взуття) — та сама система
       координат, а не старе 330%/170px під менший обрізаний спрайт. */
    top: 0px;
    width: 1800px;
    left: -500px;
}

#char-backpack {
    top: 320px;/* вниз */
    left: -10px;
    left: 170px;   /* вправо */
}

#char-body    { z-index: 1; }
#char-boots   { z-index: 2; }
#char-pants   { z-index: 3; }
#char-shirt   { z-index: 4; top: 280px; width: 570%; left: -90px; }
#char-armor   { z-index: 5; }
/* Рука і маска-підсвітка — ПОВЕРХ верхнього одягу (куртки), інакше рукав ховає кисть. */
#char-hand    { z-index: 6; }
#char-hand-right { z-index: 6; }
#char-backpack{ z-index: 7; }
#char-helmet  { z-index: 8; }
/* Повнорозмірний шар (1186×880), та сама система координат, що й
   #char-armor/#char-pants/#char-boots — стара 400px/170px/300% була
   підібрана "на око" ще до того, як зʼявились реальні спрайти зброї. */
#char-weapon  {
    z-index: 9;
    top: 0px;
    width: 1800px;
    left: -500px;
}

/* Той самий порядок шарів для сцени гардеробу (cs-char-*) */
#cs-char-body    { z-index: 1; }
#cs-char-boots   { z-index: 2; }
#cs-char-pants   { z-index: 3; }
#cs-char-shirt   { z-index: 4; }
#cs-char-armor   { z-index: 5; }
/* .cs-slot-mask сидить на z-index:6 — вище одягу, але нижче рук нижче */
#cs-char-hand    { z-index: 7; }
#cs-char-hand-right { z-index: 7; }
#cs-char-backpack{ z-index: 8; }
#cs-char-helmet  { z-index: 9; top: 300px; width: 1800px; left: -800px; }
/* Той самий бокс 1186×880, що й #cs-char-armor/pants/boots (top:300/width:1800/left:-800) */
#cs-char-weapon  {
    z-index: 10;
    top: 300px;
    width: 1800px;
    left: -800px;
}

/* Маска-підсвітка: наведення на персонажа відкриває гардероб.
   Підсвітка керується JS (.hover-active), а не :hover, бо :hover
   на прямокутному <img> спрацьовує і на прозорих пікселях маски. */
.char-body-mask {
    opacity: 0;
    transition: opacity 0.2s;
    filter: drop-shadow(0 0 14px rgba(255,255,255,0.9)) drop-shadow(0 0 26px rgba(120,200,255,0.6));
    pointer-events: auto;
}
.char-body-mask.hover-active {
    opacity: 1;
    cursor: pointer;
}

/* Маски-кнопки категорій одягу в сцені гардеробу (взуття/штани/верх) — той
   самий принцип підсвітки, що й .char-body-mask вище, кожна поверх усіх
   персонажевих шарів (z-index:8 — найвище там). */
.cs-slot-mask {
    /* Поверх усього одягу (у т.ч. верхнього одягу/куртки, z-index:5), але
       НИЖЧЕ рук (z-index:7) — щоб пальці не ховались під підсвіткою. */
    z-index: 6;
    opacity: 0;
    transition: opacity 0.2s;
    filter: drop-shadow(0 0 14px rgba(255,255,255,0.9)) drop-shadow(0 0 26px rgba(120,200,255,0.6));
    /* pointer-events:none — хіт-тест рахується вручну по координатах на document
       (script.js), а не через нативне таргетування DOM; auto тут лише невидимо
       перекривав би кнопки "✕/✓" під персонажем своїм повним bounding rect'ом. */
    pointer-events: none;
}
.cs-slot-mask.hover-active {
    opacity: 1;
    cursor: pointer;
}
/* Контур голови — над головним убором (#cs-char-helmet, z-index:9), інакше
   на персонажі в шоломі/шапці підсвітку повністю ховає убір. Рук там немає. */
#cs-mask-head { z-index: 11; }
.cs-filter-bar {
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    color: #d4a870;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.5px;
}
.cs-filter-reset {
    background: rgba(120,70,10,0.25);
    border: 1px solid rgba(180,120,40,0.5);
    border-radius: 6px;
    color: #f0c840;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    padding: 5px 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.cs-filter-reset:hover { background: rgba(120,70,10,0.45); }
/* Фільтр по бафу (граната/дрон/ракета/енергія) — незалежна вісь від слота
   (взуття/штани/верх, який керується кліком по персонажу). Справжній dropdown
   за зразком Turya: кнопка-перемикач (btnSortUtils.webp, 112×34) відкриває
   спадний список на підкладці (btnSortUtilsBG.webp, реально 259×498 — тут
   розтягнута під висоту контенту, бо повний вертикальний розмір нам не треба). */
.cs-buff-dropdown {
    position: relative;
    display: inline-block;
    margin: 6px 4px 10px;
}
.cs-buff-toggle {
    background: url('img/char/shop_ui/turya_ref/btnSortUtils.webp') center / 100% 100% no-repeat;
    border: none;
    color: #3a2408;
    font-family: 'Font2', 'Bebas Neue', sans-serif;
    font-size: 12px;
    letter-spacing: 0.3px;
    padding: 8px 16px;
    cursor: pointer;
    min-width: 120px;
    transition: filter 0.15s;
}
.cs-buff-toggle:hover { filter: brightness(1.08); }
.cs-buff-panel {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 30;
    width: 259px;
    height: 498px;
    box-sizing: border-box;
    background: url('img/char/shop_ui/turya_ref/btnSortUtilsBG.webp') center / 100% 100% no-repeat;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cs-buff-option {
    padding: 8px 20px;
    font-family: 'Font2', 'Bebas Neue', sans-serif;
    font-size: 14px;
    color: #3a2408;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s;
}
.cs-buff-option:hover { background: rgba(120,70,10,0.15); }
.cs-buff-option.active { background: rgba(120,70,10,0.28); font-weight: 700; }
.cs-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #9a8a6a;
    padding: 30px 10px;
    font-size: 14px;
}

/* ===== Гардероб / Магазин одягу (повноекранна сцена, за зразком Turya "ClothScene") ===== */
#cloth-shop-modal {
    font-family: 'Bebas Neue', sans-serif;
    overflow: hidden;
}
.cs-bg {
    position: absolute; inset: 0;
    background: url('img/char/shop_ui/backgroundMain.webp') center / cover no-repeat;
    z-index: 0;
}
.cs-char-panel {
    position: absolute;
    left: 4%; top: 8%;
    width: 34%; height: 84%;
    z-index: 1;
}
.cs-char-bg {
    position: absolute; inset: 0;
    background: url('img/char/shop_ui/CustomizeBg.webp') center / 100% 100% no-repeat;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}
.cs-char-stage.character {
    position: absolute;
    left: 50%; top: 46%;
    transform: translate(-50%, -50%) scale(0.3) translateY(-600px);
    width: 200px; height: 300px;
    z-index: 1;
}
.cs-char-actions {
    position: absolute;
    left: 50%; bottom: 4%;
    transform: translateX(-50%);
    display: flex; gap: 24px;
    z-index: 2;
}
.cs-btn-exit, .cs-btn-accept {
    width: 56px; height: 56px;
    cursor: pointer;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5));
    transition: transform 0.1s;
}
.cs-btn-exit:hover, .cs-btn-accept:hover { transform: scale(1.08); }

/* Перемикач режиму (одяг/зброя) — вертикальна смуга праворуч від персонажа,
   за зразком референсу (Turya ClothScene). */
.cs-mode-btns {
    position: absolute;
    right: 10px; top: 18%;
    display: flex; flex-direction: column; gap: 14px;
    z-index: 3;
}
.cs-mode-btn {
    width: 50px; height: 50px;
    cursor: pointer;
    border-radius: 10px;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)) grayscale(0.65) brightness(0.7);
    transition: filter 0.15s, transform 0.15s;
}
.cs-mode-btn:hover { filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)) grayscale(0.25) brightness(0.9); }
.cs-mode-btn.active {
    filter: drop-shadow(0 0 8px rgba(255,180,60,0.8));
    transform: scale(1.1);
}

.cs-shop-panel {
    position: absolute;
    right: 4%; top: 8%;
    width: 56%; height: 84%;
    background: rgba(15,15,20,0.55);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 1;
}
/* Нативний скролбар сховано — замість нього мальований зі взводів (.cs-scroll-track) */
.cs-shop-panel { scrollbar-width: none; }
.cs-shop-panel::-webkit-scrollbar { display: none; }
.cs-scroll-track {
    position: absolute; right: calc(4% + 4px); top: calc(8% + 10px);
    width: 19px; height: calc(84% - 20px); z-index: 2;
    background: url('img/clan/clan/base/clan_0005s_0014_Friend_modal_0013_Scrol_bar_bg-kopiia.webp') center / 100% 100% no-repeat;
}
.cs-scroll-thumb {
    position: absolute; left: 0; top: 5px; width: 19px; height: 86px; cursor: grab;
    background: url('img/clan/clan/base/clan_0005s_0013_Friend_modal_0012_scrollbar-kopiia.webp') center / 100% 100% no-repeat;
}
.cs-grid {
    display: grid;
    grid-template-columns: repeat(3, 151px);
    gap: 18px;
    justify-content: center;
}
.cs-card {
    position: relative;
    width: 151px; height: 245px;
    box-sizing: border-box;
    color: #2a1c08;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.12s ease;
}
.cs-card:hover {
    transform: translateY(-4px) scale(1.035);
    filter: brightness(1.08) drop-shadow(0 6px 14px rgba(0,0,0,0.5));
    z-index: 2;
}
/* Іконка вже намальована точно під розмір картки (151x245) — сідає на неї 1:1, позаду рамки */
.cs-card-img {
    position: absolute;
    top: 0; left: 0;
    width: 151px; height: 245px;
    z-index: 0;
}
/* Рамка card_P1.webp малюється ПОВЕРХ іконки */
.cs-card-frame {
    position: absolute;
    top: 0; left: 0;
    width: 151px; height: 245px;
    z-index: 1;
    pointer-events: none;
}
/* Нижня частина картки — назва/ціна/кнопка, поверх рамки */
/* Бейдж "Випадає з боса" — картинка під розмір картки 151x245, поверх рамки */
.cs-card-drop-badge {
    position: absolute;
    top: 0; left: 0;
    width: 151px; height: 245px;
    z-index: 3;
    pointer-events: none;
}
.cs-card-footer {
    position: absolute;
    left: 10px; right: 10px; bottom: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 2px;
    z-index: 2;
    padding-top: 6px;
}
.cs-card-name {
    font-size: 12px; text-align: center; letter-spacing: 0.5px;
    line-height: 1.1;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
.cs-card-stat {
    font-size: 11px; color: #4a3410;
}
.cs-card-price {
    display: flex; align-items: center; gap: 4px;
    font-size: 13px; font-weight: 700; color: #7a3e08;
}
.cs-card-price img { width: 14px; height: 14px; }
.cs-card-buy {
    width: 100%; height: 26px;
    background: url('img/char/shop_ui/btnCart.webp') center / 100% 100% no-repeat;
    border: none;
    color: #1a3a08;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 12px; letter-spacing: 1px;
    cursor: pointer;
}
.cs-card-buy:hover { filter: brightness(1.08); }
/* "Зняти" — та сама кнопка-текстура, але з червоним відтінком замість зеленого,
   щоб не плутати з "Купити"/"Надіти". */
.cs-card-unequip { filter: hue-rotate(-95deg) saturate(1.8); }
.cs-card-unequip:hover { filter: hue-rotate(-95deg) saturate(1.8) brightness(1.08); }
.cs-card-owned {
    width: 100%; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(74,53,16,0.25);
    border: 1px solid rgba(74,53,16,0.4);
    border-radius: 3px;
    color: #4a3410;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 12px; letter-spacing: 1px;
    box-sizing: border-box;
}


/* === Friend View Panel === */
#friend-view-panel {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 310px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 40px #000c;
    color: white;
}
#friend-loc-bg {
    position: relative;
    width: 310px;
    height: 390px;
    background: url('img/locations/1.webp') center/cover no-repeat;
    overflow: hidden;
}
.fvp-close {
    position: absolute;
    top: 8px; right: 8px;
    background: #000a;
    border: none;
    color: white;
    font-size: 15px;
    cursor: pointer;
    border-radius: 50%;
    width: 26px; height: 26px;
    line-height: 26px;
    text-align: center;
    z-index: 10;
}
.fvp-close:hover { background: #c0392b; }

/* Стати-оверлей зверху */
.fvp-top-overlay {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: linear-gradient(to bottom, #000c 0%, #0000 100%);
    padding: 8px 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}
.fvp-avatar {
    width: 40px; height: 40px;
    border-radius: 6px;
    object-fit: cover;
    border: 2px solid #fff5;
    flex-shrink: 0;
}
.fvp-name {
    font-weight: bold;
    font-size: 14px;
    text-shadow: 0 1px 3px #000;
}
.fvp-stats-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-family: 'Bebas Neue', sans-serif;
    color: #f5d78e;
    text-shadow: 0 1px 2px #000;
    margin-top: 3px;
}
.fvp-stat-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Персонаж */
.fvp-char-wrap {
    position: absolute;
    left: -18px;
    top: -160px;
    width: 345px;
    height: 550px;
    overflow: hidden;
    pointer-events: none;
}

/* Кнопки-оверлей знизу */
.fvp-bottom-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, #000d 0%, #0000 100%);
    padding: 20px 10px 10px;
    display: flex;
    gap: 8px;
    z-index: 10;
}
.fvp-btn {
    flex: 1;
    padding: 8px 4px;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    cursor: pointer;
    font-weight: bold;
    backdrop-filter: blur(2px);
}
.fvp-btn-green { background: #27ae60cc; }
.fvp-btn-green:hover { background: #27ae60; }
.fvp-btn-green:disabled { background: #555a; cursor: default; }
.fvp-btn-blue  { background: #2980b9cc; }
.fvp-btn-blue:hover  { background: #2980b9; }

/* Send item list */
.fvp-item-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 150px;
    overflow-y: auto;
}
.fvp-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2a2a2a;
    border-radius: 6px;
    padding: 5px 8px;
    color: white;
}
.fvp-item-icon { font-size: 16px; }
.fvp-item-name { flex: 1; font-size: 12px; }
.fvp-item-qty  { font-size: 11px; color: #aaa; }
.fvp-item-send {
    background: #8e44ad;
    border: none;
    color: white;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
}
.fvp-item-send:hover { background: #7d3c98; }

/* ═══ Модалки подарунків (#gift-send-modal/#gifts-inbox-modal) — той самий
   паперовий каркас .modal-training/.tm-header, що й #trainingModal тощо, лише вужчий (компактний список замість повної сцени). ═══ */
.gift-modal-inner { width: 380px; max-height: 70vh; }
.gift-modal-list {
    padding: 10px 14px 16px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.gift-modal-empty {
    text-align: center;
    padding: 22px 10px;
    color: #7a5a30;
    font-size: 13px;
}

/* Gift item rows — кольори під світлий паперовий фон (раніше були під темну модалку) */
.gift-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(100,70,20,0.25);
}
.gift-item-row:last-child { border-bottom: none; }
.gift-item-icon { width: 32px; height: 32px; object-fit: contain; border-radius: 4px; background: rgba(100,70,20,0.12); }
.gift-item-name { flex: 1; font-size: 13px; color: #2a1c08; }
.gift-item-qty  { font-size: 12px; color: #7a5a30; white-space: nowrap; }
.gift-item-send {
    background: linear-gradient(to bottom, #8a5ec0, #6a3ea0);
    border: 1px solid #5a2e90; color: #fff; border-radius: 6px;
    padding: 5px 12px; font-size: 12px; font-family: 'Bebas Neue', sans-serif;
    letter-spacing: .5px; cursor: pointer; white-space: nowrap;
}
.gift-item-send:hover { filter: brightness(1.1); }

/* ═══ #gifts-inbox-modal — редизайн за img/hud/reward/rewards.psd (канва 1024×768,
   координати 1:1 з PSD, без зсуву — той самий підхід, що й #questsModal/.qw-*). ═══ */
/* Специфічність двома класами навмисна — .gr-inner (тут, вище в файлі) і базовий
   .modal-training-inner (нижче) мають однакову вагу, і при однаковій специфічності
   виграє те, що ЗАПИСАНЕ ПІЗНІШЕ у файлі — тобто базове правило з paper_bg.webp
   перебивало б .background:transparent. .modal-training-inner.gr-inner важче. */
.modal-training-inner.gr-inner {
    position: relative; width: 1024px; height: 768px; max-height: none;
    background: transparent; border: none; border-radius: 0; box-shadow: none;
    padding: 0; overflow: visible; display: block;
}
.gr-bg-outer { position: absolute; left: 206px; top: 132px; width: 628px; height: 401px; pointer-events: none; }
.gr-bg-inner { position: absolute; left: 248px; top: 180px; width: 544px; height: 342px; pointer-events: none; }
.gr-title-bg { position: absolute; left: 174px; top: 100px; width: 280px; height: 115px; pointer-events: none; }
.gr-title-text {
    position: absolute; left: 270px; top: 137px; width: 148px; text-align: center;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1px;
    color: #2a1c08; text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.gr-exit-btn { position: absolute; left: 785px; top: 142px; width: 33px; height: 32px; right: auto; cursor: pointer; z-index: 2; }

.gr-list-viewport {
    position: absolute; left: 276px; top: 215px; width: 488px; height: 307px;
    overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
.gr-list-viewport::-webkit-scrollbar { display: none; }
.gr-list-inner { position: relative; width: 488px; }

/* ── Рядок подарунка (top виставляється inline через JS, крок 96px) ── */
.gr-row { position: absolute; left: 0; width: 488px; height: 92px; }
.gr-row-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gr-row-icon { position: absolute; left: 7px; top: 18px; width: 75px; height: 63px; object-fit: contain; pointer-events: none; }
.gr-row-name {
    position: absolute; left: 116px; top: 21px; width: 150px;
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; color: #2a1c08;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gr-row-qty {
    position: absolute; left: 270px; top: 21px; width: 40px;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 14px; color: #2a1c08;
}
.gr-row-date {
    position: absolute; left: 315px; top: 23px; width: 100px;
    font-family: 'Inter', sans-serif; font-size: 11px; color: #7a5a30;
}
.gr-row-avatar-frame { position: absolute; left: 421px; top: 19px; width: 48px; height: 51px; object-fit: contain; pointer-events: none; }
.gr-row-avatar { position: absolute; left: 424px; top: 24px; width: 42px; height: 41px; object-fit: cover; border-radius: 3px; }
.gr-empty { text-align: center; padding: 30px 0; color: #6b4a28; font-size: 13px; }

.shop-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    justify-content: center;
}

.tab-btn {
    background: #2a2a2a;
    color: #fff;
    padding: 6px 14px;
    border: 2px solid #6a4d2f;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Bebas Neue';
}

.tab-btn.active {
    background: #543424;
    border-color: #aa7b4e;
}

.shop-items-container {
    max-height: 400px;
    overflow-y: auto;
}

.tab-btn {
    background: #3a2d1f;
    color: white;
    border: 2px solid #6a4d2f;
    border-radius: 6px;
    padding: 6px 14px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    cursor: pointer;
}

.tab-btn.active {
    background: #543424;
    border-color: #aa7b4e;
}

.shop-grid .shop-item {
    background: url('img/shop/frame.webp') no-repeat center;
    background-size: contain;
    width: 100px;
    height: 120px;
    padding: 12px;
    text-align: center;
    color: white;
    font-size: 12px;
}
.item-attack-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.item-attack-buttons button {
    width: 45px;
    height: 45px;
    border: none;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    border-radius: 4px; /* трохи округлі кути */
}
.item-attack-buttons button:active {
    transform: scale(0.9);
    filter: brightness(0.8);
}

@keyframes nato-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Спінер на стартовому екрані */
.loader-nato-spin {
    width: 72px;
    height: 72px;
    animation: nato-spin 1.2s linear infinite;
    filter: invert(1) brightness(1.4) drop-shadow(0 0 10px rgba(0,255,204,0.6));
    display: block;
    margin: 0 auto 20px;
}

/* Міні-спінер під час fetch-запитів — по центру контейнера гри */
#nato-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    z-index: 999999;
    display: none;
    pointer-events: none;
}
#nato-spinner img {
    width: 100%;
    height: 100%;
    animation: nato-spin 0.9s linear infinite;
    filter: invert(1) brightness(1.5) drop-shadow(0 0 6px rgba(0,220,180,0.7));
}
#nato-spinner.active { display: block; }

/* Оверлей-спінер для сцен/модалок, поки не довантажаться картинки всередині */
.scene-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11,15,18,0.92);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scene-loading-overlay .loader-nato-spin {
    width: 48px;
    height: 48px;
    margin: 0;
}

#loader-screen {
    position: fixed;
    inset: 0;
    background: #0b0f12;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    opacity: 1;
    transition: opacity 0.4s ease;
}
#loader-screen.loader-hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-card {
    background: #1a1e22;
    border: 2px solid #00ffcc44;
    padding: 30px;
    border-radius: 14px;
    box-shadow: 0 0 40px rgba(0, 255, 204, 0.15);
    width: 320px;
    text-align: center;
    color: #d0fdf5;
}

.loader-title {
    font-size: 20px;
    margin-bottom: 20px;
    text-shadow: 0 0 8px rgba(0, 255, 204, 0.3);
}

.loader-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loader-bar {
    background: #0f1418;
    border-radius: 10px;
    overflow: hidden;
    height: 18px;
    border: 1px solid #00ffcc55;
}

.loader-fill {
    background: linear-gradient(to right, #00ffcc, #008877);
    width: 0%;
    height: 100%;
    transition: width 0.1s ease;
}

.loader-percent {
    font-size: 13px;
    color: #8efae3;
}

/* ===== VICTORY POPUP REDESIGNED ===== */
#boss-victory-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vp-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.78);
}
/* Координати нижче — 1:1 переклад позицій з bundle.js Turya (контейнер-центр (292,272) в рамках 584x544 картинки bgRawardBosses.webp) */
.vp-box {
    position: relative;
    z-index: 1;
    background: url('img/bosses/turya_victory/bgRawardBosses.webp') center / 100% 100% no-repeat;
    border: none;
    border-radius: 0;
    box-shadow: 0 0 80px rgba(0,0,0,0.95);
    width: 584px;
    height: 544px;
    max-width: 96%;
    padding: 0;
    font-family: 'Bebas Neue', sans-serif;
    color: #2a1c08;
    animation: vpDropIn 0.45s cubic-bezier(0.175,0.885,0.32,1.275);
    overflow: visible; /* заголовок стирчить над верхнім краєм */
}
@keyframes vpDropIn {
    from { transform: translateY(-60px) scale(0.9); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.vp-header {
    position: absolute;
    left: 50%; top: 2px;
    transform: translate(-50%, -50%);
    width: 339px;
    height: 70px;
    background: var(--bg-vp-title, url('img/bosses/turya_victory/plWinBosses.webp')) center / 339px 70px no-repeat;
    text-indent: -9999px; /* текст запечений у картинці */
    overflow: hidden;
    z-index: 5;
}
/* Поразка: ширший заголовок plLoseBosses (407x78), бос по центру, не закреслений
   і в кольорі, блоку нагороди немає */
#boss-victory-popup.vp-defeat .vp-header { width: 407px; height: 78px; background-size: 407px 78px; }
#boss-victory-popup.vp-defeat .vp-boss-x,
#boss-victory-popup.vp-defeat .vp-reward-col { display: none; }
#boss-victory-popup.vp-defeat .vp-boss-wrap,
#boss-victory-popup.vp-defeat .vp-boss-name,
#boss-victory-popup.vp-defeat .vp-boss-wins { left: 292px; }
#boss-victory-popup.vp-defeat .vp-boss-img { filter: none; }
.vp-main { display: contents; }
/* Boss dead image — wanted-poster frame з Turya */
.vp-boss-col { display: contents; }
.vp-boss-wrap {
    position: absolute;
    left: 162px; top: 132px;
    transform: translate(-50%, -50%);
    width: 194px;
    height: 243px;
    background: url('img/bosses/turya_victory/bgPhoroBosses.webp') center / 100% 100% no-repeat;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20px;
    box-sizing: border-box;
    z-index: 2;
}
.vp-boss-img {
    position: relative;
    top: var(--y, 20px);
    left: var(--y, 20px);
    height: 160px;
    object-fit: cover;
    object-position: top center;
    filter: grayscale(60%) brightness(0.6);
}
.vp-boss-x {
    position: absolute;
    top: 30px; left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(255,0,0,0.6));
}
.vp-boss-name {
    position: absolute;
    left: 162px; top: 218px;
    transform: translate(-50%, -50%);
    width: 170px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #2a1c08;
    text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    z-index: 2;
}
.vp-boss-wins {
    position: absolute;
    left: 162px; top: 233px;
    transform: translate(-50%, -50%);
    width: 170px;
    text-align: center;
    font-size: 12px;
    color: #4a3410;
    z-index: 2;
}
/* Reward panel — рваний папір з Turya, злегка перекриває фото (як у Turya) */
.vp-reward-col {
    position: absolute;
    left: 367px; top: 142px;
    transform: translate(-50%, -50%);
    width: 237px;
    height: 191px;
    background: url('img/bosses/turya_victory/bgRewardBosses.webp') center / 100% 100% no-repeat;
    padding: 14px 16px 10px;
    box-sizing: border-box;
    color: #2a1c08;
    z-index: 3;
}
.vp-reward-hdr {
    font-size: 18px;
    color: #4a3410;
    letter-spacing: 2px;
    text-align: center;
    border-bottom: 1px solid rgba(90,50,10,0.35);
    padding-bottom: 5px;
    margin-bottom: 8px;
    text-shadow: none;
}
.vp-rewards-list { display: flex; flex-direction: column; gap: 5px; }
.vp-reward-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #2a1c08;
}
.vp-reward-icon { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.vp-reward-val { font-weight: 700; color: #7a3e08; margin-left: auto; }
/* Top 3 players — круглі монети-медальйони (як у Turya combo-леердборді) */
.vp-top3 {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 4;
    pointer-events: none;
}
.vp-player-slot {
    position: absolute;
    width: 100px;
    text-align: center;
    pointer-events: auto;
}
.vp-slot-1 { left: 292px; top: 292px; transform: translate(-50%, -50%); }
.vp-slot-2 { left: 132px; top: 322px; transform: translate(-50%, -50%); }
.vp-slot-3 { left: 452px; top: 322px; transform: translate(-50%, -50%); }
.vp-slot-medal {
    position: absolute;
    top: -8px; left: 50%;
    transform: translateX(-50%);
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 900; color: #2a1c08;
    font-family: sans-serif;
    z-index: 2;
    border: 1px solid rgba(0,0,0,.3);
}
.vp-slot-1 .vp-slot-medal { background: #ffd700; }
.vp-slot-2 .vp-slot-medal { background: #c0c0c0; }
.vp-slot-3 .vp-slot-medal { background: #cd7f32; }
.vp-slot-avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    object-fit: cover;
    box-sizing: border-box;
    border: 3px solid #ffd700;
    box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.vp-slot-2 .vp-slot-avatar { border-color: #c0c0c0; }
.vp-slot-3 .vp-slot-avatar { border-color: #cd7f32; }
.vp-slot-name {
    font-size: 12px; color: #fff8e0;
    margin-top: 4px;
    text-shadow: 1px 1px 2px rgba(0,0,0,.8);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
}
.vp-slot-dmg { font-size: 13px; color: #ffe94d; font-weight: 700; text-shadow: 1px 1px 2px rgba(0,0,0,.8); }
.vp-slot-empty {
    width: 60px; height: 60px; margin: 0 auto;
    border-radius: 50%; border: 3px solid rgba(255,255,255,.25);
    display: flex; align-items: center; justify-content: center;
    opacity: 0.6; color: #fff8e0; font-size: 20px; font-family: sans-serif;
}
/* Main button — жовта кнопка з Turya */
.vp-btn {
    position: absolute;
    left: 292px; top: 397px;
    transform: translate(-50%, -50%);
    width: 180px; height: 42px;
    background: url('img/bosses/turya_victory/btnConfirm.webp') center / 100% 100% no-repeat;
    border: none;
    color: #301600;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
    text-shadow: none;
    z-index: 5;
}
.vp-btn:hover { filter: brightness(1.08); }
.vp-btn:active { transform: translate(-50%, -50%) scale(0.96); }
/* Damage ranking */
.vp-rank-section {
    position: absolute;
    left: 47px; top: 422px;
    width: 490px; height: 108px;
    background: rgba(0,0,0,0.12);
    border: none;
    padding: 8px 12px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 3;
}
.vp-rank-hdr { font-size: 14px; color: #4a3410; margin-bottom: 5px; letter-spacing: 1px; }
.vp-rank-row {
    display: flex; justify-content: space-between;
    font-size: 13px; color: #4a3410;
    padding: 2px 0;
    border-bottom: 1px solid rgba(74,53,16,0.25);
}
.vp-rank-row:last-child { border-bottom: none; }
.vp-rank-pos { color: #7a5a30; margin-right: 6px; }
.vp-rank-dmg { color: #7a3e08; font-weight: 700; }

@keyframes fadeIn {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes dropIn {
    from { transform: translateY(-100px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.attack-button {
    position: relative;
    display: inline-block;
    border: none;
    padding: 0;
    cursor: pointer;
    background: none;
    width: 200px; /* адаптуй до своєї картинки */
    height: 64px;
}

.attack-btn-img {
    width: 300%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 8px;
}

.attack-btn-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-0%, -50%);
    font-size: 22px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 4px black;
    pointer-events: none;
}
.logout-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    gap: 8px;
    font-size: 16px;
    color: white;
    font-weight: bold;
}

.logout-btn img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    transform: translate(var(--img-offset-x, 0px), var(--img-offset-y, 0px));
}

.logout-btn span {
    position: relative;
    z-index: 2;
}

.audio-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 2px;
    background: transparent;
}

.icon-button,
.logout-btn,
.lang-current {
    display: flex;
    align-items: center;
    gap: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 2px;
    color: white;
    font-size: 14px;
    transition: background 0.2s, transform 0.2s;
}

.icon-button img,
.logout-btn img,
.lang-current img {
    width: 22px;
    height: 22px;
}

.icon-button:hover,
.logout-btn:hover,
.lang-current:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.lang-wrapper {
    position: static;
}

/* Dropdown — ПОЗА .game-container, position:fixed відносно viewport */
.lang-dropdown {
    position: fixed;
    z-index: 100000;
    min-width: 158px;
    background: url('img/ui/paper_bg.webp') center/cover no-repeat;
    border: 2px solid #8a6830;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(200,160,80,0.18);
    overflow: hidden;
    /* Початковий стан — схований */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.lang-dropdown--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}

/* Заголовок дропдауну */
.lang-dropdown::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, transparent, #c88030 30%, #c88030 70%, transparent);
    margin-bottom: 2px;
}

.lang-dropdown div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    cursor: pointer;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
    color: #2a1808;
    transition: background 0.12s;
    user-select: none;
}

.lang-dropdown div img {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    flex-shrink: 0;
}

.lang-dropdown div:hover {
    background: rgba(200,128,48,0.22);
    color: #7a3e08;
}

.lang-dropdown div.lang-option--active {
    background: rgba(200,128,48,0.15);
    color: #7a3e08;
    font-weight: 700;
}

/* Розділювач між пунктами */
.lang-dropdown div + div {
    border-top: 1px solid rgba(140,100,40,0.2);
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    animation: slideIn 0.4s ease-out forwards;
}


@keyframes slideIn {
    from { opacity: 0; transform: translateX(-100%); }
    to { opacity: 1; transform: translateX(0); }
}


.modal-content {
    background: #1c1f26;
    position: absolute;
    top: 50px;
    left: 350px;
    color: white;
    padding: 30px;
    border-radius: 10px;
    max-width: 500px;
    margin: 80px auto;
    text-align: center;
    box-shadow: 0 0 12px rgba(17, 21, 20, 0.2);
}


.search-input {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: none;
    margin-bottom: 10px;
    background: #2e3340;
    color: white;
}


.action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #00ffcc;
    color: black;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    margin-top: 10px;
    cursor: pointer;
}


.action-button.cancel {
    background: #ff5e5e;
}

.button-overlay {
    position: relative;
    display: inline-block;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.button-overlay img {
    display: block;
    width: 200px;
    height: 35px;
    transition: filter 0.1s ease;
}

.button-overlay span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 14px;
    pointer-events: none;
    text-shadow: 0 0 4px black;
    transition: transform 0.2s ease;
}

/* 🟢 Ефект наведення — без збільшення розміру, лише яскравість */
.button-overlay:hover img {
    filter: brightness(1.2);
}

.button-overlay:active span {
    transform: translate(-50%, -50%) scale(0.95);
}

.png-btn-with-text {
    position: relative;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-block;
    transition: transform 0.2s ease;
    width: 200px; /* 🔧 ширина кнопки */
    height: 32px;  /* 🔧 висота кнопки */
}

.png-btn-with-text img {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
}

/* Текст поверх зображення */
.png-btn-with-text span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: bold;
    pointer-events: none;
    text-shadow: 1px 1px 2px black;

    white-space: nowrap; /* ✅ Не переносити текст */
    overflow: hidden;     /* 🔒 Захист від розриву */
    text-overflow: ellipsis;
}


/* 🎯 Ефекти */
.png-btn-with-text:hover {
    transform: scale(1.05);
}

.png-btn-with-text:active {
    transform: scale(0.95);
}


.btn-png-with-text {
    position: absolute;
    left: var(--x);
    top: var(--y);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1000;
}

.btn-png-with-text img {
    display: block;
    width: 180px;
    height: auto;
    border-radius: 12px;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.3s ease;
}

.btn-png-with-text:hover img {
    filter: brightness(1.1);
    box-shadow: 0 0 15px 4px yellow;
}

.btn-png-with-text:active img {
    transform: scale(0.96);
}

.btn-png-with-text span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    pointer-events: none;
    white-space: nowrap;
}
.png-btn-with-text-fixed {
    position: absolute;
    left: var(--x, 0px);
    top: var(--y, 0px);
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 14px;
    text-align: center;
    padding: 0;
    z-index: 10;
    transition: transform 0.2s ease;
}

.png-btn-with-text-fixed img {
    display: block;
    max-width: 140px;
    height: auto;
    transition: filter 0.2s ease;
}

.png-btn-with-text-fixed span {
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    margin-top: -6px;
}

.png-btn-with-text-fixed:hover img {
    filter: drop-shadow(0 0 6px yellow);
}

.png-btn-with-text-fixed:active {
    transform: scale(0.95);
}

.png-btn-bg {
    background-image: url('img/ui/btn_polygon.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 60px;
    border: none;
    background-color: transparent;
    cursor: pointer;

    font-family: 'Dela Gothic One', sans-serif;
    font-size: 14px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;

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

    transition: box-shadow 0.3s ease, filter 0.3s ease, transform 0.3s ease;

    /* Координати (за замовчуванням 0, але можна перевизначити) */
    position: absolute;
    left: var(--x, 800px);
    top: var(--y, 260px);
}
.png-btn-bg:hover {
    filter: drop-shadow(0 0 8px yellow);
    transform: scale(1.05); /* невелике збільшення */

}




/* ═══════════════════════════════════════════
   ПРЕМІУМ МАГАЗИН — новий дизайн
   ═══════════════════════════════════════════ */
/* ===== Преміум магазин — сцена продавця (як #trainingModal/#boss-selection-panel) ===== */
.ps-scene {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: calc(100% - 62px);
    z-index: 9999;
    overflow: hidden;
    /* Нативний розмір картинки — 1024×768, раніше було стиснуто до 675 по висоті */
    background: url('img/packs/store/store.webp') center / 1024px 768px no-repeat, #1a1008;
}

#premium-modal .tm-exit-btn { top: 90px; }

/* ===== Сцена "Прогрес" — Досягнення / Таланти / Колекції ===== */
#progress-modal.ps-scene {
    top: var(--tp-h);
    height: calc(100% - var(--tp-h)); /* базовий .ps-scene має top:-20px, підібраний під Premium Store — тут це ховало вкладки під топ-панеллю */
    background: url('img/loot/bg.png') center / 1448px 1086px no-repeat, #1a1008; /* реальний розмір картинки — той самий фон на всіх трьох вкладках */
    display: flex;
    flex-direction: column;
}
#progress-tab-content.pg-body {
    margin: 44px 18px 18px 24px; /* left:24px — щоб ліва межа картки збігалась з .pg-tabs (left:24px), як у Взводах */
    max-width: 744px; /* реальна ширина Clan_bg_main_vkladka.webp — без цього картка розтягувалась до ширини сцени (988px) і масштабувала текстуру */
    position: relative;
    z-index: 2; /* вище вкладок — низ вкладок ховається під верхнім краєм картки */
    flex: 0 0 auto; /* flex:1 форсував висоту, яка ламала aspect-ratio картки (спотворювало Clan_bg_main_vkladka.webp) */
}
#progress-modal .tm-exit-btn { top: 14px; }

.pg-tabs {
    display: flex;
    position: absolute;
    top: 17px;
    left: 24px;
    z-index: 1; /* нижче паперової картки — низ вкладок ховається під нею, як у Взводах */
}
.pg-tabs .btn {
    /* Clan_page_Main_vkladka.webp — реальні пропорції 124:38, а не довільні 150:40 (спотворювало картинку) */
    width: 131px; height: 40px;
    margin-right: -6px;
    font-family: 'Courier New', monospace;
    font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    border: none;
    background: url('img/clan/Clan_page_Main_vkladka.webp') center/100% 100% no-repeat;
    color: #8a6a48;
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
    cursor: pointer;
    position: relative; z-index: 1;
    transition: filter .15s, transform .15s, color .15s;
    left: var(--y, 270px);
}
.pg-tabs .btn:hover { filter: brightness(1.08); }
.pg-tabs .btn.active {
    color: #000; text-shadow: 0 1px 0 rgba(255,220,150,0.5);
    transform: translateY(-6px) scale(1.08); /* лише масштаб — height:44px ламав ті самі пропорції 124:38 */
    z-index: 2;
}

.pg-body {
    overflow-y: auto;
    padding: 10px 16px 16px;
    /* scrollbar-width/scrollbar-color НЕ ставимо — Chrome 121+ пріоритизує їх
       над ::-webkit-scrollbar-thumb на тому самому елементі (див. .achievement-
       scroll-wrapper вище), тому картинка-скролбар нижче просто ігнорувалась. */
}
/* Нативні скролбари сцени "Прогрес" сховано — замість них мальований зі взводів
   (.pg-scroll-track, сусід картки, тож не прокручується разом із вмістом). */
#progress-modal .pg-body,
#progress-modal .pg-body * { scrollbar-width: none; }
#progress-modal .pg-body::-webkit-scrollbar,
#progress-modal .pg-body *::-webkit-scrollbar { display: none; }
.pg-scroll-track {
    position: absolute;
    /* top/left виставляє JS (_pgSyncScroll) від реального положення картки */
    width: 19px; height: 470px; /* до верхнього краю нижньої панелі */
    z-index: 3;
    background: url('img/clan/clan/base/clan_0005s_0014_Friend_modal_0013_Scrol_bar_bg-kopiia.webp') center / 100% 100% no-repeat;
}

/* .tlm-box уже сама по собі "картка" — в новій сцені вона не в окремому оверлеї, тож своя рамка/тінь зайві */
#progress-modal .pg-tlm-box {
    max-height: none;
    box-shadow: none;
    border: none;
    background: transparent;
    width: 100%;
    padding: 0;
}

/* Кнопки-заклики "Купити монети" прямо на сцені продавця (біля полиць) — 3 окремі
   кнопки, кожна зі своїми координатами top/left, щоб їх можна було незалежно
   розставити по полицях. Фон — порожня капсула (btn_Bay_mag.webp, нативно 78×30),
   іконка (icon_1.webp) і текст "Купити" — окремі елементи по центру. */
.ps-buy-cta {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: url('img/packs/store/btn_Bay_mag.webp') center / 100% 100% no-repeat;
    border: none;
    width: 83px;
    height: 35px;
    cursor: pointer;
    transition: transform .15s;
}
.ps-buy-cta-icon { width: 16px; height: 16px; object-fit: contain; pointer-events: none; }
.ps-buy-cta-label {
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 11px;
    color: #4a2f06;
    letter-spacing: 0.3px;
    pointer-events: none;
}
/* Дефолтні позиції — три полиці зліва направо. Підправ top/left під потрібні місця. */
.ps-buy-cta--1 { top: 65%; left: 47%; }
.ps-buy-cta--2 { top: 40%; left: 58%; transform: translateX(-50%); }
.ps-buy-cta--3 { top: 70%; left: 80%; transform: translateX(-100%); }
.ps-buy-cta--1:hover { transform: translateY(-3px); }
.ps-buy-cta--2:hover { transform: translateX(-50%) translateY(-3px); }
.ps-buy-cta--3:hover { transform: translateX(-100%) translateY(-3px); }

/* ===== Модалка з тарифами (відкривається кнопкою на сцені) ===== */
.pm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-box {
    position: relative;
    width: 1000px;
    /* % від .game-container (оверлей усередині трансформованого контейнера), а не vw/vh:
       на мобільному контейнер зменшено ~0.5, і 90vh у його координатах обрізало вікно вдвічі */
    max-width: 96%;
    max-height: 90%;
    overflow-y: auto;
    padding: 22px 20px 18px;
    text-align: center;
}

.pm-close-btn {
    position: absolute;
    top: 14px;
    right: 16px;
    background: rgba(200,146,42,.15);
    border: 1px solid #c8922a;
    color: #c8922a;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    transition: background .2s;
    z-index: 2;
}
.pm-close-btn:hover { background: rgba(200,146,42,.4); }

.pm-header { margin-bottom: 12px; }
.pm-title {
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 22px;
    color: #f0c840;
    text-shadow: 0 2px 12px rgba(240,200,64,.5);
    letter-spacing: 3px;
}
.pm-subtitle { color: #a08050; font-size: 12px; margin-top: 2px; }

/* Tabs */
.pm-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}
.pm-tab {
    padding: 8px 24px;
    background: rgba(200,146,42,.1);
    border: 2px solid #6b4a1a;
    color: #c8922a;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all .2s;
    letter-spacing: 1px;
}
.pm-tab:hover { border-color: #c8922a; background: rgba(200,146,42,.2); }
.pm-tab.active {
    background: linear-gradient(135deg, #c8922a, #f0c840);
    border-color: #f0c840;
    color: #1a1008;
    box-shadow: 0 0 14px rgba(240,200,64,.4);
}

/* ═══ Стенд з категоріями товарів (Гроші / Цигарки / Енергетики) ═══
   Дерев'яна дошка (BG_1.webp, нативно 644×473) з колонкою вкладок-категорій
   зліва (vkladk.webp) і сіткою 4×2 паперових цінників (podloj.webp — вже
   цільний фон з голкою зверху). */
/* Обгортка тримає дошку й вкладки як СУСІДІВ (не вкладеність) — вкладки
   малюються ПЕРШИМИ (нижчий z-index), дошка ПОВЕРХ них із власним непрозорим
   фоном, тому права частина кожної вкладки ховається "за" дошкою, а назовні
   стирчить лише її лівий край. */
.pmv2-wrap {
    position: relative;
    width: 620px;
    max-width: 100%;
    margin: 6px auto 0;
}
.pmv2-board {
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio: 644 / 473;
    background: url('img/packs/store/BG_1.webp') center / 100% 100% no-repeat;
    padding: 34px 20px 20px 20px;
    box-sizing: border-box;
}
.pmv2-sidebar {
    position: absolute;
    /* -60px: рівно стільки вкладки (98px) стирчить ЗЛІВА від дошки (клікабельно,
       іконка теж туди влазить), решта (38px) фізично під дошкою (z-index:1 < 2)
       — тому й ховається "за" нею, без конфлікту з кліком по видимій частині. */
    left: -60px;
    top: 10px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
/* Нативний розмір vkladk.webp — 98×82, не розтягуємо */
.pmv2-cat-tab {
    width: 98px;
    height: 82px;
    background: url('img/packs/store/vkladk.webp') center / 100% 100% no-repeat;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    filter: brightness(.7);
    transition: filter .15s, transform .15s;
}
.pmv2-cat-tab img { width: 44px; height: 44px; object-fit: contain; pointer-events: none; }
.pmv2-cat-tab:hover { filter: brightness(.85); }
.pmv2-cat-tab.active { filter: brightness(1.15); transform: translateX(-14px); }

.pmv2-category-label {
    position: absolute;
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 36%;
    max-height: 7.5%;
    object-fit: contain;
    pointer-events: none;
    z-index: 3;
}

.pmv2-grid {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(2, 145px);
    gap: 10px 8px;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 100%;
}
/* Нативний розмір podloj.webp — 100×145, картка більше не розтягується під
   довільну ширину grid-комірки. */
.pmv2-grid .pm-pack-card {
    width: 100px;
    height: 145px;
    background: url('img/packs/store/podloj.webp') top center / 100% 100% no-repeat;
    padding: 30px 4px 6px;
    box-sizing: border-box;
    min-height: 0;
}
.pmv2-grid .pm-pack-img-wrap { height: 34px; margin-top: 21px; }
.pmv2-grid .pm-pack-img { max-width: 70px; max-height: 60px; }
/* Золотий текст (.pm-pack-coins) губиться на світлому папері цінника —
   тут потрібен темний колір замість того, що на темному тлі старої сітки. */
.pmv2-grid .pm-pack-coins { font-size: 11px; margin-top: 2px; color: #4a2f06; text-shadow: none; }
/* margin-top:auto на flex-дитині (.pm-pack-card display:flex;flex-direction:column)
   притискає кнопку в самий низ підложки, а не одразу під ціною. */
.pmv2-grid .pm-pack-buy-btn { min-height: 22px; font-size: 7px; padding: 2px 2px 3px; margin-top: auto; }
.pmv2-grid .pm-buy-label { font-size: 10px; }
.pmv2-grid .pm-buy-price { font-size: 10px; }

/* Pack card */
.pm-pack-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform .2s;
}
.pm-pack-card:hover { transform: translateY(-5px) scale(1.04); }

.pm-pack-img-wrap {
    position: relative;
    width: 100%;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.pm-pack-img {
    max-width: 80px;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.pm-pack-coins {
    margin-top: 4px;
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 15px;
    color: #f0c840;
    text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.pm-pack-badge {
    position: absolute;
    top: -4px;
    right: 2px;
    background: linear-gradient(135deg, #e03030, #ff6020);
    color: #fff;
    font-size: 8px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 8px;
    letter-spacing: 1px;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,.5);
}

.pm-pack-buy-btn {
    margin-top: 6px;
    padding: 4px 6px 6px;
    background: url('img/packs/store/buy_Button.webp') center / 100% 100% no-repeat;
    color: #4a2f06;
    border: none;
    font-weight: bold;
    font-size: 10.5px;
    cursor: pointer;
    transition: transform .15s;
    width: 100%;
    min-height: 40px;
    line-height: 1.3;
}
.pm-pack-buy-btn:hover {
    background-image: url('img/packs/store/buy_Button_1.webp');
    transform: translateY(-2px);
}
.pm-buy-label { display: block; font-size: 12px; letter-spacing: .5px; }
.pm-buy-price { display: block; font-size: 10px; opacity: .85; font-weight: 600; }

.pm-footer {
    color: #6b4a1a;
    font-size: 11px;
    margin-top: 6px;
    border-top: 1px solid #3a2a0a;
    padding-top: 8px;
}

/* ═══════════════════════════════════════════
   КРИПТО ОПЛАТА
   ═══════════════════════════════════════════ */
.crypto-overlay {
    position: fixed;
    inset: 0;
    /* Відкривається ПОВЕРХ модалки з тарифами (.pm-overlay, z-index:10000),
       яка лишається видимою позаду — тому тут вище, а не 9000. */
    z-index: 10100;
    background: rgba(0,0,0,.88);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.crypto-box {
    position: relative;
    width: 480px;
    max-width: 95%;
    background: linear-gradient(160deg, #0d0d12 0%, #151820 100%);
    border: 2px solid #f7931a;
    border-radius: 16px;
    padding: 32px 28px 24px;
    box-shadow: 0 0 50px rgba(247,147,26,.3);
    text-align: center;
}
.crypto-title {
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 22px;
    color: #f7931a;
    margin-bottom: 10px;
    letter-spacing: 2px;
}
.crypto-pack-badge {
    background: rgba(247,147,26,.12);
    border: 1px solid #f7931a44;
    border-radius: 8px;
    padding: 8px 16px;
    color: #f0c840;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 16px;
    display: inline-block;
}
.crypto-coin-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
}
.crypto-ctab {
    padding: 6px 16px;
    background: rgba(247,147,26,.08);
    border: 1px solid #f7931a44;
    color: #f7931a;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: all .15s;
}
.crypto-ctab:hover { border-color: #f7931a; }
.crypto-ctab.active { background: #f7931a; color: #000; }

.crypto-addr-block {
    background: rgba(255,255,255,.04);
    border: 1px solid #2a2a3a;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.crypto-network-label { color: #888; font-size: 12px; margin-bottom: 8px; }
.crypto-addr-row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.crypto-addr-text {
    color: #fff;
    font-family: monospace;
    font-size: 13px;
    word-break: break-all;
    flex: 1;
    text-align: left;
}
.crypto-copy-btn {
    background: rgba(247,147,26,.2);
    border: 1px solid #f7931a44;
    color: #f7931a;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s;
    flex-shrink: 0;
}
.crypto-copy-btn:hover { background: rgba(247,147,26,.4); }
.crypto-amount-hint { color: #f0c840; font-size: 13px; margin-top: 8px; font-weight: bold; }

.crypto-memo-box {
    background: rgba(255,200,0,.06);
    border: 1px solid #f0c84044;
    border-radius: 8px;
    padding: 10px 14px;
    color: #c8a030;
    font-size: 13px;
    margin-bottom: 14px;
    text-align: left;
}

.crypto-submit-block { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.crypto-tx-input {
    padding: 10px 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid #3a3a4a;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    outline: none;
    font-family: monospace;
}
.crypto-tx-input:focus { border-color: #f7931a; }
.crypto-submit-btn {
    padding: 12px;
    background: linear-gradient(135deg, #f7931a, #f0c840);
    color: #000;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: opacity .2s;
}
.crypto-submit-btn:hover { opacity: .9; }
.crypto-note-small { color: #555; font-size: 12px; }


/* 🔲 Темне тло позаду */
/* 📜 Прокрутка контенту */
.achievement-scroll-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 10px 16px 230px; /* знизу — щоб останнє досягнення можна було доскролити вище #bottom-ui-wrapper */
    /* scrollbar-width/scrollbar-color НЕ ставимо: Chrome 121+ підтримує ці
       стандартні властивості і як тільки вони задані — пріоритизує їх НАД
       ::-webkit-scrollbar-thumb на тому самому елементі, тому картинка нижче
       просто ігнорувалась. Firefox без них покаже дефолтний скролбар браузера
       (прийнятний компроміс — образ там все одно не показати). */
}
.achievement-scroll-wrapper::-webkit-scrollbar { width: 15px; }
.achievement-scroll-wrapper::-webkit-scrollbar-track { background: transparent; }
.achievement-scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: transparent;
    background-image: url('img/medals/hud/scrollbar.webp');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 15px 70px;
    border-radius: 3px;
}

/* Вкладки */
.achievement-tab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 10px 16px 8px;
    border-bottom: 1px solid rgba(120,90,30,0.3);
}
.achievement-tab-btn {
    /* та сама жовта кнопка гри, що "Тренування…" / "Так"; неактивна — приглушена сіра */
    width: 116px; height: 34px;
    padding: 0 0 3px;
    background: url('img/traning/traning_0002_Shar-6.png') center / 100% 100% no-repeat;
    border: none;
    border-radius: 0;
    color: #2a1c04;
    cursor: pointer;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 15px;
    letter-spacing: 0.5px;
    filter: grayscale(0.85) brightness(0.92);
    transition: filter 0.15s, transform 0.1s;
}
.achievement-tab-btn:hover { filter: grayscale(0.5) brightness(1.02); }
.achievement-tab-btn:active { transform: scale(0.96); }
.achievement-tab-btn.active { filter: none; }

/* Контент вкладок */
.achievement-tab-content {
    display: none;
}
.achievement-tab-content.active {
    display: block;
}
.hidden {
    display: none !important;
}
.achievement-item {
    display: flex;
    align-items: center;
    background: url('img/medals/hud/podkladka_achiv.webp') center / 100% 100% no-repeat;
    border: none;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    gap: 12px;
    transition: filter 0.2s;
}
.achievement-item.completed .achievement-text h4 { color: #1a5020; }
.achievement-item.completed .achievement-progress .fill { background: linear-gradient(90deg, #3a9a40, #1a5020); }
.achievement-item:hover { filter: brightness(1.08); }

.achievement-icon {
    width: 56px;
    height: 56px;
    border-radius: 4px;
    position: relative;
    object-fit: contain; /* не обрізати неквадратні іконки (buy_achiev 488x423) */
    flex-shrink: 0;
    left: var(--y, 10px);
}
.achievement-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.achievement-text h4 {
    margin: 0 0 3px;
    font-size: 15px;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.5px;
    color: #3a2008;
}
/* .achievement-item тут — не декоративний, а щоб перебити .clan-paper-card h4
   (той самий клас юзає сцена "Прогрес" для свого контейнера і протікав сюди
   через рівну специфічність + порядок у файлі: чужий фон-текстура клану,
   padding 8px 22px, margin 0 0 12px — саме ці розміри й лишаємо тут явно,
   щоб не змінювати поточний вигляд, просто підклавши свою картинку). */
.achievement-item .achievement-text h4 {
    margin: 0 0 12px;
    padding: 8px 22px;
    background: url('img/medals/hud/achievement_text.webp') center / 100% 100% no-repeat;
}
.achievement-text p {
    margin: 2px 0;
    font-size: 12px;
    color: #000000;
}
.achievement-progress {
    height: 8px;
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
    margin-top: 5px;
    width: 100%;
    overflow: hidden;
}
.achievement-progress .fill {
    height: 100%;
    background: linear-gradient(90deg, #c8832a, #5a3a10);
    width: 0%;
    transition: width 0.3s ease;
}

#game-container {
    position: relative; /* обов’язково, щоб toast позиціонувався всередині */
}

/* Тост "Нове досягнення" — золота стрічка-плашка (анімація 1) розгортається
   з іскристим спалахом позаду (анімація 2), обидві з
   img/medals/achievements_anim/ (js/achievementAnim.js програє кадри на canvas).
   Ширина тосту = нативна ширина стрічки (288px), щоб іконка+текст лягали
   точно на неї; canvas іскор (471×275) більший і виступає за краї — тому
   overflow:visible і pointer-events:none на самому тості. */
.achievement-toast {
    position: absolute;
    /* #bottom-ui-wrapper (кнопки + стрічка друзів) сам займає ~230px знизу
       (bottom:10px + .bottom-hud 76px + gap 8px + .fb-strip min-height 145px) —
       тому тост має бути вище цього, а не просто bottom:30px. */
    bottom: 260px;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    color: #fff;
    width: 288px;
    height: 78px;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 50px);
    transition: transform 0.5s ease, opacity 0.5s ease;
    /* Поверх усіх модалок/сцен гри (найвищий "звичайний" z-index — 12000
       у #player-profile-popup) — щоб тост не ховався за відкритим вікном. */
    z-index: 50000;
}

.achievement-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.achievement-toast.hidden {
    display: none;
}

.ach-toast-ribbon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 288px;
    height: 78px;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.ach-toast-sparkle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 471px;
    height: 275px;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

.ach-toast-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 14px;
    box-sizing: border-box;
}

.achievement-toast img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    flex-shrink: 0;
}

.achievement-toast .text { min-width: 0; }

.achievement-toast .title {
    font-weight: bold;
    font-size: 13px;
    color: #3a2408;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.achievement-toast .desc {
    font-size: 11px;
    color: #5a4020;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === CSS стилізація для "Полігону" (уникнення конфліктів) === */

/* ===== TRAINING MODAL - REDESIGNED ===== */
.modal-training {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10500;
}

.modal-training.hidden {
    display: none;
}

/* ═══ Модалка нарахувань від адміністрації — паперова картка з голкою зверху
   (approved_modal.webp/_en.webp, нативно 476×356), напис "НАРАХУВАННЯ"/"ACCRUAL"
   вже вшитий у саму картинку. ═══ */
.ar-modal-inner {
    position: relative;
    width: 476px;
    height: 356px;
    display: flex;
    flex-direction: column;
}
.ar-modal-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 476px;
    height: 356px;
    z-index: 0;
    pointer-events: none;
}
.ar-modal-admin {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-top: 19%;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #7a5010;
    font-style: italic;
    flex-shrink: 0;
}
.ar-modal-list {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 9% 0;
}
.ar-modal-claim {
    position: relative;
    z-index: 1;
    align-self: center;
    margin: 8px auto 12%;
    width: 150px;
    height: 48px;
    background: url('img/packs/store/modal_apr/btn.webp') center / 100% 100% no-repeat;
    border: none;
    cursor: pointer;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    letter-spacing: 1.5px;
    color: #4a2306;
    text-shadow: 0 1px 0 rgba(255,220,140,0.4);
    transition: filter .15s;
    flex-shrink: 0;
    top: var(--y, 40px);
}
.ar-modal-claim:hover { filter: brightness(1.08); }

.modal-training-inner {
    position: relative;
    background-image: url(img/ui/paper_bg.webp);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    padding: 0;
    border-radius: 14px;
    width: 720px;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,220,140,0.08);
    color: #1a1208;
    font-family: 'Inter', sans-serif;
    border: 3px solid #8a6830;
    overflow: hidden;
}

/* ===== Пошук гравця — компактний modal-training-inner (той самий паперовий
   стиль, що й в решті модалок), замість старого plain .modal/.modal-content. ===== */
.sch-overlay {
    position: fixed; inset: 0; z-index: 10500;
    display: none; align-items: center; justify-content: center;
}
.sch-overlay-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.75); }
.sch-box {
    position: relative;
    width: min(420px, 92%);
    max-height: none;
    padding: 22px 20px 20px;
    align-items: stretch;
    gap: 14px;
}
.sch-close-btn {
    position: absolute; top: 8px; right: 8px;
    width: 34px; height: 34px; cursor: pointer;
    filter: brightness(1.25) drop-shadow(0 2px 4px rgba(0,0,0,0.6));
    transition: transform 0.15s ease;
}
.sch-close-btn:hover { transform: scale(1.1); }
.sch-title {
    margin: 0; text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px; letter-spacing: 1px; color: #2a1a08;
}
.sch-search-row { display: flex; gap: 8px; }
.sch-input {
    flex: 1; min-width: 0;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(90,50,10,0.4);
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 13px; color: #2a1a08;
    font-family: 'Inter', sans-serif;
}
.sch-input::placeholder { color: #6b5a3e; }
.sch-input:focus { outline: none; border-color: #8a6830; background: rgba(255,255,255,0.75); }
.sch-search-btn {
    flex-shrink: 0;
    background: linear-gradient(180deg, #f0d980 0%, #c8a030 100%);
    border: 1px solid #8a6830;
    border-radius: 6px;
    padding: 0 18px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px; letter-spacing: 1px; color: #3a2205;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.sch-search-btn:hover { filter: brightness(1.08); }
.sch-result { min-height: 20px; }
.sch-loading, .sch-empty {
    text-align: center; padding: 14px 4px;
    font-family: 'Bebas Neue', sans-serif; font-size: 14px; letter-spacing: 0.5px;
    color: #5a4425;
}
.sch-card {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.35);
    border: 1px solid rgba(90,50,10,0.3);
    border-radius: 8px;
    padding: 10px 12px;
}
.sch-card-avatar {
    width: 48px; height: 48px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
    border: 2px solid #8a6830; cursor: pointer;
}
.sch-card-info { flex: 1; min-width: 0; }
.sch-card-name {
    font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: 0.5px;
    color: #2a1a08; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sch-card-stats {
    display: flex; gap: 12px; margin-top: 3px;
    font-size: 12px; color: #4a3410;
}
.sch-card-stats img { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
.sch-add-btn {
    flex-shrink: 0;
    background: linear-gradient(180deg, #7fdb7f 0%, #3e9e3e 100%);
    border: 1px solid #2a7a2a;
    border-radius: 6px;
    padding: 8px 14px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 12px; letter-spacing: 0.5px; color: #0f3a0f;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.sch-add-btn:hover { filter: brightness(1.08); }

/* ===== "Полігон" — окрема сцена всередині game-container (як #boss-selection-panel), під верхньою панеллю ===== */
#trainingModal {
    position: absolute;
    top: var(--tp-h);
    left: 0;
    width: 100%;
    height: calc(100% - var(--tp-h));
    background: transparent;
    justify-content: stretch;
    align-items: stretch;
    z-index: 9999;
}
#trainingModal .modal-training-inner {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

/* ===== "Взводи" — теж окрема повноекранна сцена ===== */
#clans-modal {
    position: absolute;
    top: var(--tp-h);
    left: 0;
    width: 100%;
    height: calc(100% - var(--tp-h));
    background: transparent;
    justify-content: stretch;
    align-items: stretch;
    z-index: 9999;
}
#clans-modal .clan-modal-inner {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
}

/* Header strip */
.tm-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 12px;
    background: rgba(0,0,0,0.18);
    border-bottom: 2px solid rgba(100,70,20,0.4);
    flex-shrink: 0;
    position: relative;
}
.tm-header-stripe {
    width: 4px;
    height: 26px;
    background: repeating-linear-gradient(
        -45deg, #8a6830 0px, #8a6830 4px, transparent 4px, transparent 8px
    );
    border-radius: 2px;
    opacity: 0.8;
}
.tm-header-title {
    font-size: 22px;
    font-weight: 800;
    color: #1a1208;
    letter-spacing: 0.5px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    letter-spacing: 2px;
}

/* Scrollable list */
#training-stages, #combat-stages {
    overflow-y: auto;
    flex: 1;
    padding: 14px 14px 6px;
}
#training-stages {
    padding-bottom: 230px; /* щоб останній блок не ховався під #bottom-ui-wrapper (z-index:10000) */
}
#training-stages::-webkit-scrollbar,
#combat-stages::-webkit-scrollbar { width: 14px; }
#training-stages::-webkit-scrollbar-track,
#combat-stages::-webkit-scrollbar-track { background: transparent; }
#training-stages::-webkit-scrollbar-thumb,
#combat-stages::-webkit-scrollbar-thumb {
    background: url('img/ui/scrollbar.webp') no-repeat center / cover;
    border-radius: 7px;
    min-height: 30px;
}
#training-stages::-webkit-scrollbar-thumb:hover,
#combat-stages::-webkit-scrollbar-thumb:hover { filter: brightness(1.2); }

/* Card */
.training-block {
    background: url('img/ui/note_bg.webp') center/cover no-repeat;
    border-radius: 8px;
    border: 1px solid rgba(100,70,20,0.35);
    margin-bottom: 12px;
    overflow: hidden;
    transition: opacity 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.training-block.locked {
    opacity: 0.55;
    pointer-events: none;
}
/* Override: show leader in stamp for combat blocks */
.combat-block .tb-stamp .stage-leader {
    display: flex;
}

/* Card row */
.tb-main {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 160px;
}

/* Location image */
.tb-img-wrap {
    flex: 0 0 110px;
    overflow: hidden;
    border-right: 2px solid rgba(100,70,20,0.3);
    position: relative;
}
.training-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Center content */
.tb-content {
    flex: 1;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tb-title {
    font-size: 16px;
    font-weight: 800;
    color: #1a1208;
    line-height: 1.2;
}
.tb-holds {
    font-size: 11px;
    color: #6b4e1a;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stage-leader {
    font-size: 13px;
    color: #2a1c08;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.tb-stamp .leader-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #c8a030;
    box-shadow: 0 0 5px rgba(200,160,48,0.55);
    display: block;
    flex-shrink: 0;
}
.tb-stamp .leader-avatar.hidden { display: none; }
.tb-pts { font-size: 11px; color: #6b4e1a; }

.training-progress-wrapper {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.training-progress-bar {
    flex: 1;
    height: 16px;
    background: rgba(0,0,0,0.18);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(100,70,20,0.4);
}
.training-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00c890, #00ffcc);
    width: 0%;
    transition: width 0.6s ease;
    border-radius: 8px;
}
.training-progress-text {
    font-size: 12px;
    color: #4a3010;
    font-weight: 700;
    white-space: nowrap;
    min-width: 36px;
    text-align: right;
}
.tb-desc {
    font-size: 12px;
    color: #5a3a10;
    margin: 2px 0 0;
    font-style: italic;
}

/* Stamp column */
.tb-stamp {
    flex: 0 0 106px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 6px;
    padding: 10px 8px;
    border-left: 2px solid rgba(100,70,20,0.25);
}
.tb-stamp-circle {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 3px solid #8a3010;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    font-weight: 900;
    color: #8a3010;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
    opacity: 0.75;
    background: rgba(180,60,20,0.06);
    box-shadow: inset 0 0 0 2px rgba(180,60,20,0.2);
    transform: rotate(-8deg);
    flex-shrink: 0;
}
.tb-stamp .stage-leader {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    position: static;
    left: 0;
    top: 0;
}
.tb-leader-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.tb-leader-info .leader-name {
    font-size: 12px;
    font-weight: 700;
    color: #2a1c08;
    line-height: 1.2;
    word-break: break-word;
    max-width: 90px;
}
.tb-leader-info .tb-pts {
    font-size: 11px;
    color: #6b4e1a;
    font-weight: 600;
    white-space: nowrap;
}

/* Card footer */
.tb-footer {
    padding: 8px 14px 10px;
    background: rgba(0,0,0,0.06);
    border-top: 1px solid rgba(100,70,20,0.2);
}
.training-btn {
    padding: 7px 22px;
    background: linear-gradient(135deg, #d4861c, #a85e10);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 7px;
    cursor: pointer;
    transition: 0.15s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    letter-spacing: 0.3px;
}
.training-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}
.training-btn:active { transform: translateY(0); filter: brightness(0.95); }
.training-btn:disabled {
    background: #888;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
    filter: none;
}

/* Bottom bar */
.tm-bottom-bar {
    padding: 10px 14px 14px;
    border-top: 2px solid rgba(100,70,20,0.3);
    background: rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.tm-close-btn {
    padding: 8px 20px;
    background: rgba(0,0,0,0.22);
    color: #3a2808;
    border: 2px solid rgba(100,70,20,0.5);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s;
}
.tm-close-btn:hover {
    background: rgba(0,0,0,0.35);
    border-color: rgba(100,70,20,0.8);
}
#closeTrainingModal { cursor: pointer; }

/* Leader avatar - show when set */
.leader-avatar.visible { display: inline-block; }

/* ══════════════════════════════════════════════════════════════
   ТРЕНУВАННЯ (Полігон) — редизайн за референсом traning.psd.
   Координати взяті напряму з шарів PSD (канва гри 1024×768,
   #trainingModal стоїть з top:50px — тому Y тут = psd_Y - 50).
   Картинки НЕ розтягуються/не стискаються (нативний розмір),
   окрім піґулок прогресу — їх звужено за проханням (10 замість 4).
   ══════════════════════════════════════════════════════════════ */
.tn-inner { background: #1c1712; overflow: hidden; }

.tn-bg-desk {
    position: absolute;
    /* Шар "Фон" у traning.psd — вся канва (0,0) → top = 0 - 50, як .cv-bg/.cb-bg/
       .bp-bg-photo. Було top:0 — після зсуву вмісту на +10px (панель 40px замість
       50px) фон починався нижче панелі й лишав смугу 10px. */
    left: 0; top: -50px;
    width: 1024px; height: 768px;
    pointer-events: none;
}
.tn-bg-paper {
    position: absolute;
    left: 71px; top: 21px;
    width: 866px; height: 506px;
    pointer-events: none;
}
.tn-bg-tactics {
    position: absolute;
    left: 77px; top: 21px;
    width: 868px; height: 507px;
    pointer-events: none;
}
.tn-card {
    position: absolute;
    left: 152px; top: 107px;
    width: 722px; height: 399px;
    pointer-events: none;
}

.tn-rows {
    position: absolute;
    left: 152px; top: 107px;
    width: 722px; height: 399px;
    box-sizing: border-box;
    padding: 20px 0 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    /* скидаємо старі властивості #training-stages/.combat-block-контейнера */
    flex: none;
}
.tn-rows::-webkit-scrollbar { width: 10px; }
.tn-rows::-webkit-scrollbar-track { background: transparent; }
.tn-rows::-webkit-scrollbar-thumb {
    background: url('img/ui/scrollbar.webp') no-repeat center / cover;
    border-radius: 6px;
}

/* Скидання старого вигляду .training-block для нових рядків */
.training-block.tn-row {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 25px;
    overflow: visible;
    flex-shrink: 0;
}
.tn-row {
    position: relative;
    width: 664px;
    height: 110px;
}
.tn-row-bg {
    position: absolute;
    left: 0; top: 0;
    width: 664px; height: 110px;
    pointer-events: none;
}
.tn-row-icon {
    position: absolute;
    left: 14px; bottom: 14px;
    pointer-events: none;
}
.tn-row .tb-title {
    position: absolute;
    left: 181px; top: 22px;
    max-width: 314px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 0.5px;
    color: #2a1c08;
    text-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tn-pips {
    position: absolute;
    left: 161px; top: 58px;
    width: 314px; height: 13px;
    display: flex;
    gap: 5px;
}
.tn-pip {
    flex: 1;
    height: 13px;
    background-image: url('img/traning/traning_0000_bgProgresT.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
}
.tn-pip.filled::after {
    content: '';
    position: absolute;
    inset: 2px 1px;
    background-image: url('img/traning/traning_0002_ProgresT-kopiia-2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform-origin: left center;
    animation: tnPipFill 0.4s ease-out both;
}
/* Початковий рендер (вже наявний прогрес) — без анімації, миттєво */
.tn-pip.filled.no-anim::after {
    animation: none;
    opacity: 1;
    transform: scaleX(1);
}
@keyframes tnPipFill {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}
.tn-row-leader {
    position: absolute;
    left: 161px; top: 76px;
    max-width: 314px;
}
.tn-row .tb-stamp-circle {
    position: static;
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    text-transform: none;
    display: block;
    background: none;
    color: #6b4e1a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 0;
    line-height: 1.2;
}
.tn-row .stage-leader {
    display: none;
    align-items: center;
    gap: 5px;
    position: static;
    top: auto; left: auto;
}
.tn-row .stage-leader.tn-visible { display: flex; }
.tn-row .leader-avatar {
    width: 16px; height: 16px;
    margin-right: 0;
    border-radius: 50%;
    object-fit: cover;
}
.tn-row .leader-name {
    font-size: 11px;
    font-weight: 700;
    color: #3a2808;
}
.tn-row .leader-points,
.tn-row .tb-pts {
    display: inline;
    position: static;
    top: auto;
    gap: 0;
    font-size: 10px;
    color: #6b4e1a;
}
/* Топ гравець локації — як у бойових діях (.cb-top-badge / .cb-avatar-wrap / .cb-points) */
.tn-my-score {
    display: flex; align-items: center; gap: 4px;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 14px; color: #5a3e1c;
    top: 78px;
}
.tn-my-score img, .tn-top-line img { width: 20px; height: 20px; }
.tn-my-val { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 17px; color: #2a1c08; }
.tn-top-badge {
    position: absolute; left: 497px; top: -4px;
    width: 53px; height: 43px; z-index: 2; pointer-events: none;
}
.tn-avatar-wrap {
    position: absolute; left: 487px; top: 14px;
    width: 73px; height: 78px; z-index: 1;
}
.tn-avatar-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tn-avatar-img {
    position: absolute; left: 5px; top: 9px;
    width: 60px; height: 63px; object-fit: cover; border-radius: 3px;
}
.tn-avatar-img.player-link { cursor: pointer; }
.tn-top-score {
    position: absolute; left: 568px; top: 30px; width: 86px;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 15px; color: #5a3e1c;
}
.tn-top-line { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.tn-top-val {
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 21px; color: #ffdf8a; text-shadow: 0 1px 3px rgba(0,0,0,.85); letter-spacing: 0.5px;
}
.tn-row-btn {
    position: absolute;
    left: 5px; top: 68px;
    width: 156px; height: 36px;
    background: url('img/traning/traning_0002_Shar-6.png') center/100% 100% no-repeat;
    border: none;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #2a1c04;
    cursor: pointer;
    padding: 0 0 3px;
}
.tn-row-btn:disabled {
    background-image: none;
    background-color: #b8ac90;
    color: #6b6250;
    cursor: not-allowed;
}
.tn-row.locked .tn-row-btn { opacity: 1; }

.open-bp-btn {
    background-image: url('img/ui/battle_pass.webp'); /* PNG з прозорим фоном */
    background-size: contain; /* зберігає пропорції картинки */
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    position: absolute;
    top: 285px;
    left: 890px;

    /*width: 200px;       /* 🔁 Зміни розмір тут */
    height: 60px;       /* 🔁 Зміни висоту тут */

    font-family: 'Dela Gothic One', sans-serif;
    font-size: 14px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;

    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.3s ease;

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

    padding: 0;
}
.open-bp-btn:hover {
    filter: drop-shadow(0 0 8px yellow);
    transform: scale(1.05); /* невелике збільшення */
}

/* ══════════════════════════════════════════════════════════════
   BATTLE PASS — редизайн за pass.psd. Повноекранна сцена (як
   #trainingModal), координати з шарів PSD (канва 1024×768,
   top-панель 50px, тому Y тут = psd_Y - 50). Статичні елементи
   (фони, картки, кнопки, замок, стрічка, прогрес-бар) — нативний
   розмір з PSD, без розтягування/стиснення. Нагороди на картках
   і мітки прогресу генеруються з реальних даних сезону.
   ══════════════════════════════════════════════════════════════ */
#battle-pass-modal {
    position: absolute;
    top: var(--tp-h); left: 0;
    width: 100%; height: calc(100% - var(--tp-h));
    background: transparent;
    z-index: 9999;
    overflow: hidden;
    justify-content: stretch;
    align-items: stretch;
}
#battle-pass-modal.hidden { display: none; }

.bp-inner {
    position: relative;
    width: 100%; height: 100%;
    max-width: none; max-height: none;
    padding: 0; margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: #14100c;
    backdrop-filter: none;
    overflow: hidden;
    color: #fff;
    text-shadow: none;
    font-family: 'Bebas Neue', sans-serif;
}

.bp-bg-photo, .bp-bg-main, .bp-l-stencil, .bp-r-stencil,
.bp-combo-spiner, .bp-smuggling-bg, .bp-ribbon, .bp-title-img,
.bp-hero-bg, .bp-lock, .bp-progress-track {
    position: absolute;
    pointer-events: none;
}

.bp-bg-photo   { left: 0; top: -50px; width: 1024px; height: 768px; }
.bp-l-stencil  { left: -15px;   top: -10px;    width: 417px;  height: 495px; }
.bp-r-stencil  { left: 594px;  top: 189px;  width: 417px;  height: 495px; }
.bp-bg-main    { left: 64px;   top: 58px;   width: 897px;  height: 503px; }
.bp-combo-spiner { left: 65px; top: 305px;  width: 250px;  height: 250px; }
.bp-smuggling-bg { left: 340px; top: 374px; width: 394px;  height: 274px; }
.bp-ribbon     { left: 413px;  top: 11px;   width: 248px;  height: 88px; }
.bp-title-img  { left: 448px;  top: 26px;   width: 178px;  height: 31px; }

.bp-close-btn {
    position: absolute;
    left: 961px; top: 17px;
    width: 42px; height: 41px;
    cursor: pointer;
    z-index: 30;
    transition: transform 0.2s ease;
}
.bp-close-btn:hover { transform: scale(1.1); }

.bp-season-name {
    position: absolute;
    left: 65px; top: 15px;
    font-size: 16px;
    letter-spacing: 1px;
    color: #1e1b11;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.bp-countdown-wrap {
    position: absolute;
    left: 65px; top: 33px;
    font-size: 12px;
    color: #1e1b11;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.bp-respect-wrap {
    position: absolute;
    right: 65px; top: 15px;
    display: flex; align-items: center; gap: 5px;
    font-size: 16px; font-weight: bold;
    color: #ffe8b0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.bp-respect-wrap img { width: 18px; height: 18px; }

/* ── Треки (спільне для free/premium) ── */
.bp-hero {
    position: absolute;
    z-index: 2;
}
.bp-free-hero    { left: 99px; top: 93px;  width: 175px; height: 148px; }
.bp-premium-hero { left: 99px; top: 356px; width: 173px; height: 148px; }
.bp-hero-bg { left: 0; top: 0; width: 100%; height: 100%; }
.bp-lock    { left: -2px; top: 41px; width: 182px; height: 93px; z-index: 3; }

.bp-track-label {
    position: absolute;
    z-index: 3; /* понад .bp-hero (z-index:2) — інакше картинка героя ховає напис */
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #f0d8a0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    text-align: center;
}
.bp-free-label    { left: 111px; top: 205px; width: 159px; }
.bp-premium-label { left: 120px; top: 474px; width: 137px; }

.bp-list {
    position: absolute;
    top: 93px;
    left: 283px;
    width: 599px; /* 5 слотів по 111px + 4 gap по 11px — до кінця bgMain, як у PSD */
    height: 148px;
    display: flex;
    gap: 11px;
    overflow-x: auto;
    overflow-y: hidden;
    /* Нативну смугу прокрутки ховаємо — керування через власний .bp-scrollbar-thumb */
    scrollbar-width: none;
}
.bp-premium-list {
    top: 360px;
    height: 150px;
    width: 603px; /* 5 слотів по 115px + 4 gap по 7px */
    gap: 7px;
}
.bp-list::-webkit-scrollbar { display: none; }

.bp-slot {
    position: relative;
    flex-shrink: 0;
    width: 111px;
    height: 100%;
    background: url('img/battle_pass/battle_pass_0041_Free_tier_list.png') center/100% 100% no-repeat;
    cursor: pointer;
}
.bp-premium-list .bp-slot {
    width: 115px;
    background-image: url('img/battle_pass/battle_pass_0028_premium_tier_list.png');
}
.bp-slot.locked    { filter: grayscale(0.6) brightness(0.65); cursor: default; }
.bp-slot.claimed   { filter: saturate(0.5) brightness(0.8); }
.bp-slot.claimable { filter: drop-shadow(0 0 8px rgba(255,220,80,0.75)); }
.bp-slot-lock {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 15px; height: 22px;
    background: url('img/battle_pass/battle_pass_0023_block_tier.png') center/100% 100% no-repeat;
    z-index: 2;
}
.bp-slot-rewards {
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    display: flex;
    justify-content: center;
}
.bp-slot-check {
    position: absolute;
    right: 4px; top: 4px;
    font-size: 15px;
    font-weight: bold;
    color: #5fdc6a;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

/* ── Іконка нагороди: одна велика (осн. тип тіру) + дрібні додаткові ── */
.bp-rw-big {
    display: flex; flex-direction: column; align-items: center;
}
.bp-rw-big img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }
.bp-rw-big span {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #fff5cc;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    line-height: 1.1;
}
.bp-slot .bp-rw-big img { 
    width: 65px; 
    position: relative;
    top: var(--y, -22px);
    height: 65px; 
}
.bp-slot .bp-rw-big span { font-size: 25px; }

.bp-rw-extra {
    position: absolute;
    left: 0; right: 0; top: 6px;
    display: flex; flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
}
.bp-rw {
    display: flex; flex-direction: column; align-items: center;
    width: 20px;
}
.bp-rw img { width: 14px; height: 14px; object-fit: contain; }
.bp-rw span {
    font-size: 8px;
    color: #ffe8b0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    line-height: 1.1;
}

/* ── Прогрес-бар з віхами ── */
.bp-progress-wrap {
    position: absolute;
    left: 99px; top: 280px;
    width: 827px; height: 80px;
    z-index: 2;
}
.bp-progress-track { left: 0; top: 0; width: 827px; height: 29px; }
.bp-progress-fill {
    position: absolute;
    left: 4px; top: 4px;
    height: 21px;
    max-width: 819px;
    /* Тайл full_fill_progress.png (194×21) не безшовний — на межі повтору
       "стрибає" фаза діагональних смуг. CSS-градієнт безшовний за будь-якої
       ширини, кольори підібрані під ту саму текстуру. */
    background: repeating-linear-gradient(
        -45deg,
        #ffd400 0px, #ffd400 10px,
        #ffb300 10px, #ffb300 20px
    );
    transition: width 0.6s ease;
}
.bp-milestones { position: absolute; inset: 0; }
.bp-milestone {
    position: absolute;
    top: -11px; /* 51px висота бейджа центрована на 29px барі: (29-51)/2 = -11 */
    width: 71px; height: 51px;
    transform: translateX(-50%);
    background: url('img/battle_pass/battle_pass_0020_slot_skip.png') center/100% 100% no-repeat;
    display: flex; align-items: center; justify-content: center;
}
.bp-milestone.reached { filter: none; }
.bp-milestone.pending { filter: grayscale(0.7) brightness(0.75); }
.bp-milestone span {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #3a2404;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

/* ── Спільний скролбар (керує обома треками синхронно) ── */
.bp-scrollbar-wrap {
    position: absolute;
    left: 97px; top: 513px;
    width: 846px; height: 25px;
    z-index: 2;
}
.bp-scrollbar-track {
    position: absolute;
    left: 0; top: 0;
    width: 846px; height: 25px;
    pointer-events: none;
}
.bp-scrollbar-thumb {
    position: absolute;
    left: 6px; top: 3px;
    width: 93px; height: 20px;
    background: url('img/battle_pass/battle_pass_0006_scrollbar.png') center/100% 100% no-repeat;
    cursor: grab;
}
.bp-scrollbar-thumb:active { cursor: grabbing; }

/* ── Кнопка купівлі преміум ── */
.bp-buy-btn-img {
    position: absolute;
    left: 384px; top: 575px;
    width: 307px; height: 50px;
    background: url('img/battle_pass/battle_pass_0046_button_buy.png') center/100% 100% no-repeat;
    border: none;
    cursor: pointer;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #2a1c04;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.bp-buy-btn-img:hover { filter: brightness(1.08); }
.bp-buy-btn-img.bp-premium-active { display: none; }

/* ===== CLAN MODAL — reuses .modal-training-inner ===== */
.clan-modal-inner {
    background: url('img/clan/Clab_mainBg_Brigad.webp') center / cover no-repeat;
    border-color: #6b3c12;
    color: #d4a870;
    width: 900px;
    max-height: 60vh;
    box-shadow: 0 8px 40px rgba(0,0,0,0.85), inset 0 0 0 3px rgba(120,70,20,0.15);
}
/* Єдиний шрифт для всієї сцени "Взводи" */
.clan-modal-inner, .clan-modal-inner * {
    font-family: 'Font2', 'Inter', sans-serif !important;
}
/* ===== CLAN MODAL — MILITARY THEME (legacy, kept for donate modal) ===== */
.clan-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.clan-modal-content {
    width: 95%;
    max-width: 920px;
    max-height: 680px;
    background: linear-gradient(175deg, #0f1a0c 0%, #080e06 100%);
    color: #b8cc90;
    border: 1px solid #344820;
    border-top: 3px solid #5a8028;
    border-radius: 3px;
    padding: 0;
    box-shadow: 0 0 0 1px #1a2410, 0 16px 60px rgba(0,0,0,.9), 0 0 40px rgba(60,90,20,.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    font-family: 'Courier New', monospace;
}
/* corner brackets */
.clan-modal-content::before { content:''; position:absolute; top:6px; left:6px; width:14px; height:14px; border-top:2px solid #5a8028; border-left:2px solid #5a8028; pointer-events:none; z-index:10; }
.clan-modal-content::after  { content:''; position:absolute; bottom:6px; right:6px; width:14px; height:14px; border-bottom:2px solid #5a8028; border-right:2px solid #5a8028; pointer-events:none; z-index:10; }

.clan-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 22px 12px;
    background: linear-gradient(90deg, #162010 0%, #0f1a0c 100%);
    border-bottom: 1px solid #2e3d18;
}
.clan-modal-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #7aaa38;
    text-shadow: 0 0 14px rgba(90,128,40,.5);
}
.clan-modal-header .close {
    background: transparent;
    border: 1px solid #3a4a20;
    color: #4a5a38;
    font-size: 13px;
    cursor: pointer;
    width: 26px; height: 26px;
    border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.clan-modal-header .close:hover { border-color: #c03030; color: #f05050; background: rgba(180,40,40,.12); }

#clans-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 44px 24px 20px; /* зверху трохи більше — компенсує прибраний .tm-header */
    scrollbar-width: thin;
    scrollbar-color: #7a4c1a transparent;
    background: transparent; /* видно текстуру стіни з .clan-modal-inner */
}
/* Редизайн за clan.psd (.cv-scene) — повноекранна сцена 1024×718, без відступів/
   скролу самого #clans-body (той padding/overflow вище — для старих екранів
   без клану, тут він лише зсував би фон .cv-bg від країв). */
#clans-body:has(.cv-scene) {
    padding: 0;
    overflow: hidden;
    display: block;
}
#clans-body::-webkit-scrollbar { width: 5px; }
#clans-body::-webkit-scrollbar-thumb { background: linear-gradient(#9a5c18, #5a3010); border-radius: 3px; }
.clan-modal-body { flex:1; overflow-y:auto; padding-right:8px; }

/* headings */
#clans-body h3 {
    color: #e8a030;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 12px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    margin: 0 0 16px;
    padding: 0 0 10px 12px;
    border-bottom: 1px solid rgba(120,70,20,.4);
    border-left: 3px solid #c88030;
    position: relative;
}
#clans-body h4 {
    color: #000000;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 11px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    margin: 0 0 12px;
    opacity: 0.8;
}
#clans-body hr { border:none; border-top:1px solid rgba(120,70,20,.3); margin:14px 0; }

/* BUILDING CARDS */
.clan-bld-card {
    flex: 1 0 130px;
    max-width: 160px;
    text-align: center;
    padding: 12px 10px;
    border: 1px solid rgba(120,70,20,.4);
    border-top: 2px solid #9a5c18;
    border-radius: 6px;
    background: linear-gradient(160deg, rgba(40,20,6,.9) 0%, rgba(22,11,3,.75) 100%),
                url('img/clan/modal/856x82.webp') center/cover no-repeat;
    box-shadow: 0 2px 10px rgba(0,0,0,.5);
    transition: transform .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.clan-bld-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.6), 0 0 0 1px rgba(200,128,48,.2);
}

/* CLAN CARDS */
.clan-card {
    border: 1px solid rgba(120,70,20,.35);
    border-left: 4px solid #9a5c18;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 8px 0;
    background: linear-gradient(100deg, rgba(40,20,6,.85) 0%, rgba(22,11,3,.65) 100%),
                url('img/clan/modal/856x82.webp') center / cover no-repeat;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.clan-card:hover {
    border-left-color: #e8a030;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 0 0 1px rgba(200,128,48,.18);
}

/* TABS */
.clan-tabs {
    display: flex;
    margin-bottom: 18px;
    flex-wrap: wrap;
    padding-bottom: 0;
    flex-shrink: 0;
    top: var(--y, 17px); /* трохи нижче — компенсує прибраний .tm-header */
    position: absolute;
    left: var(--y, 39px);
    z-index: 1; /* нижче паперової картки — низ вкладок ховається під нею (ефект "вкладок") */
}
#clans-body .clan-tabs .btn {
    width: 150px;
    height: 40px;
    margin-right: -6px; /* внахлест, як у Turya (gap:-6) */
    font-size: 11px;
    font-family: 'Courier New', monospace;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: none;
    background: url('img/clan/Clan_page_Main_vkladka.webp') center / 100% 100% no-repeat;
    color: #8a6a48;
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
    cursor: pointer;
    box-shadow: none;
    transition: filter .15s, transform .15s, color .15s;
    position: relative;
    z-index: 1;
}
#clans-body .clan-tabs .btn:hover { filter: brightness(1.08); }
#clans-body .clan-tabs .btn.active {
    color: #000000;
    text-shadow: 0 1px 0 rgba(255,220,150,0.5);
    height: 44px;
    transform: translateY(-10px);
    z-index: 2;
}

/* ── Рейтинг кланів ─────────────────────────────────────── */
.clan-rating-wrap { padding: 4px 0 8px; }

.clan-rtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.clan-rtab {
    flex: 1;
    padding: 6px 4px;
    background: rgba(30,18,6,0.5);
    border: 1px solid rgba(120,80,20,0.3);
    border-radius: 6px;
    color: #000;
    font-family: 'Bebas Neue', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    font-size: 13px;
    letter-spacing: .5px;
    cursor: pointer;
    transition: all .2s;
}
.clan-rtab.active {
    background: rgba(60,30,8,.8);
    border-color: rgba(180,120,30,.5);
    color: #000;
    text-shadow: none;
}

.clan-rtable { width: 100%; border-collapse: collapse; }
.clan-rtable-header {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    padding: 5px 10px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    color: #7a5530;
    border-bottom: 1px solid rgba(120,80,20,0.3);
    margin-bottom: 4px;
}
.clan-rrow {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    gap: 8px;
    padding: 7px 130px 7px 10px;
    border-radius: 7px;
    margin-bottom: 3px;
    background: url('img/clan/rank_clan.webp') center / 100% 100% no-repeat;
    transition: filter .15s;
    position: relative;
}
.clan-rrow:hover { filter: brightness(1.15); }

.clan-rrow--top1 { border-color: rgba(255,215,0,0.35); }
.clan-rrow--top2 { border-color: rgba(192,192,192,0.3); }
.clan-rrow--top3 { border-color: rgba(205,127,50,0.3); }

.clan-rrank {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    color: #000000;
    text-align: center;
    line-height: 1;
}
.clan-rinfo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.clan-rname {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.clan-rtag  { font-size: 11px; color: #000000; }
.clan-rmembers { font-size: 10px; color: #000000; margin-top: 1px; }
/* Прикріплено правим краєм всередині рядка (right:10px) — довге число росте
   вліво, а не виштовхує рядок за межі картки вправо. */
.clan-rvalue-wrap {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.clan-rvalue {
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 13px;
    color: #000000;
    white-space: nowrap;
    text-align: right;
}
.clan-rvalue-label {
    font-size: 9px;
    color: #000000;
    text-align: right;
    margin-top: 1px;
    transform: translateX(-10px);
}
.clan-rating-empty { text-align:center; color:#7a5530; padding:24px 0; font-size: 13px; }
.clan-rating-loader { text-align:center; color:#8a6830; padding:20px 0; font-size: 13px; }

/* BUTTONS */
#clans-body .btn, .clan-modal-content .btn {
    background: linear-gradient(160deg, #4a2a10 0%, #2e1808 100%);
    border: 1px solid #7a4c1a;
    color: #e8a030;
    border-radius: 4px;
    padding: 7px 18px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all .15s;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,200,80,.06);
}
#clans-body .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 50%);
    pointer-events: none;
}
#clans-body .btn:hover, .clan-modal-content .btn:hover {
    background: linear-gradient(160deg, #5e3818 0%, #3a2010 100%);
    border-color: #c88030;
    color: #ffda80;
    box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 10px rgba(200,128,48,.25);
    transform: translateY(-1px);
}
#clans-body .btn:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
#clans-body .btn-danger {
    background: linear-gradient(160deg, #3e1010 0%, #240808 100%);
    border-color: #6a2020;
    color: #c06050;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    left: var(--y, 160px );
}
#clans-body .btn-danger:hover {
    background: linear-gradient(160deg, #541414 0%, #320c0c 100%);
    border-color: #c03030;
    color: #f07070;
    box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 10px rgba(200,50,50,.25);
}
#clans-body .btn-secondary {
    background: transparent;
    border-color: rgba(120,70,20,.3);
    color: #7a5530;
    box-shadow: none;
}
#clans-body .btn-secondary:hover { border-color: #7a4c1a; color: #c88030; background: rgba(120,70,20,.08); transform: none; }
#clans-body .btn-sm { padding: 4px 12px; font-size: 11px; }
#clans-body .btn-primary {
    background: url('img/clan/Clan_btnCreateClan.webp') center / 100% 100% no-repeat;
    border: none;
    color: #3a1a06;
    text-shadow: 0 1px 0 rgba(255,220,150,0.5);
    box-shadow: none;
    left: var(--y, 160px) ;
   
}
#clans-body .btn-primary::after { display: none; }
#clans-body .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: none; }

/* INPUTS */
#clans-body input:not([type="color"]):not([type="range"]):not([type="checkbox"]),
#clans-body select,
#clans-body textarea {
    background: #160c04;
    border: 1px solid #3a2410;
    border-radius: 20px;
    color: #d4a870;
    padding: 7px 10px;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 49%;
    box-sizing: border-box;
}
#clans-body input:focus, #clans-body select:focus, #clans-body textarea:focus {
    border-color: #7a5018;
    box-shadow: 0 0 0 2px rgba(120,80,20,.2);
}
#clans-body select option { background: #160c04; color: #d4a870; }

.emblem-preview { width:48px; height:48px; border-radius:2px; background:#1c1006; display:flex; align-items:center; justify-content:center; font-weight:700; border:1px solid #3a2410; }
.form-row { display:flex; gap:10px; margin:8px 0; }
.form-row > * { flex:1; }

.clan-bonus-table { width:100%; border-collapse:collapse; font-family:'Courier New',monospace; }
.clan-bonus-table td { padding:5px 8px; border-bottom:1px solid #3a2410; font-size: 12px; }
.clan-bonus-table td:last-child { color:#d4900a; font-weight:700; text-align:right; }

.clan-paper-card.clan-chat-card {
    height: 100%;
    padding-bottom: 110px; /* щоб інпут не ховався під .clan-bottom-bar, яка накладається знизу */
}
#clan-chat-messages {
    flex: 1; min-height: 0; overflow-y: auto;
    background: rgba(40,20,5,0.12);
    border: 1px solid rgba(90,50,10,0.5);
    border-radius: 4px;
    padding: 8px;
    font-size: 12px;
    color: #2a1a08;
    
}
#clan-chat-messages:empty::before {
    content: attr(data-empty-label);
    color: #8a6a48;
    font-style: italic;
    font-size: 12px;
}
#clan-chat-messages b { color: #7a3e08; }
.clan-chat-input-row { display: flex; gap: 6px; margin-top: 8px; flex-shrink: 0; }
#clan-chat-input {
    flex: 1;
    padding: 6px 10px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(90,50,10,0.4);
    border-radius: 4px;
    color: #2a1a08;
    font-family: inherit;
}
#clan-chat-input:focus { outline: none; border-color: #8a4a12; }

/* ===== "Картка" вкладки — власна текстура пергаменту, "плаває" на текстурі стіни #clans-modal ===== */
.clan-paper-card {
    background: url('img/clan/Clan_bg_main_vkladka.webp') center / 100% 100% no-repeat;
    aspect-ratio: 372 / 283; /* реальні пропорції картинки — без обрізання/спотворення */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 22px 26px;
    color: #2a1a08;
    overflow-y: auto;
    left: var(--y, 90px);
}
.emblem-preset-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    max-width: 260px;
}
.emblem-preset-opt {
    width: 44px; height: 51px; object-fit: contain;
    padding: 3px;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    background: rgba(0,0,0,0.25);
    transition: border-color .15s, transform .15s;
}
.emblem-preset-opt:hover { transform: scale(1.06); }
.emblem-preset-opt.selected { border-color: #e8a030; box-shadow: 0 0 8px rgba(232,160,48,.5); }

.clan-paper-card h4 {
    color: #6b3c12;
    margin: 0 0 12px;
    display: inline-block;
    background: url('img/clan/Clan_page_Main_vkladka.webp') center / 100% 100% no-repeat;
    padding: 8px 22px;
}

/* Кнопка відкриття модалки заявок на вступ (в шапці "Учасники") */
.clan-app-open-btn {
    background: rgba(255,255,255,0.4);
    border: 1px solid rgba(90,50,10,0.4);
    border-radius: 6px;
    color: #6b3c12;
    font-size: 11px;
    padding: 5px 12px;
    cursor: pointer;
}
.clan-app-open-btn:hover { background: rgba(255,255,255,0.6); }

/* Заявки на вступ (всередині модалки) — рядок кожної заявки */
.clan-app-accept-btn, .clan-app-reject-btn {
    width: 26px; height: 26px; flex-shrink: 0;
    border: none; cursor: pointer; padding: 0; background-color: transparent;
    background-position: center; background-size: contain; background-repeat: no-repeat;
}
.clan-app-accept-btn { background-image: url('img/clan/Clan_accept_name.webp'); }
.clan-app-reject-btn { background-image: url('img/clan/kick_player.webp'); }

/* ===== Нижня панель клану (герб + назва + статистика + прогрес рівня + дії) =====
   Абсолютне позиціювання відносно .clan-modal-inner — тому панель
   лишається на місці на будь-якій вкладці, а не "їде" разом зі скролом. */
.clan-bottom-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px 10px 66px;
    min-height: 76px;
    position: absolute;
    left: 24px;    /* X — відстань від лівого краю модалки */
    bottom: 20px;  /* Y — відстань від нижнього краю модалки */
    right: 24px;
    z-index: 5;
    background: url('img/clan/Clan_panelDown.webp') center / 100% 100% no-repeat;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
/* Кожен елемент нижньої панелі клану має свій --x/--y (за замовчуванням 0px —
   нічого не зсувається). Щоб підправити позицію будь-якого з них, просто задай
   --x і/або --y (напр. .clan-bottom-progress-label { --x: 2px; --y: -1px; }). */
.clan-bottom-crest {
    position: absolute;
    left: 18px; top: 45%;
    /* --scale масштабує емблему РАЗОМ із бейджем рівня (він усередині цього
       блоку, absolute) як одне ціле — задай напр. .clan-bottom-crest { --scale: 1.4; } */
    transform: translateY(calc(-50% + var(--y, 0px))) translateX(var(--x, 0px)) scale(var(--scale, 1.5));
    transform-origin: center;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.clan-bottom-lvl-badge {
    position: absolute; bottom: -4px; left: 50%;
    transform: translateX(calc(-50% + var(--x, 0px))) translateY(var(--y, 0px));
    background: linear-gradient(135deg,#c88030,#7a3e08);
    color: #fff8e0; font-family: 'Bebas Neue', sans-serif;
    font-size: 12px; font-weight: 900;
    padding: 0 7px; border-radius: 4px; white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,.6);
    border: 1px solid rgba(255,200,80,.3);
}
/* Скарбниця клану — винесена з .clan-bottom-stats окремим бейджем біля герба,
   бо в загальному текстовому рядку іконка монети зсувала весь наступний текст. */
.clan-bottom-treasury {
    /* left замість right: коли цифра росте (менше символів → більше), бейдж
       розширюється ВПРАВО, а не заходить на герб/кнопки зліва. */
    position: absolute; top: 21px; left: 480px;
    transform: translate(var(--x, 0px), var(--y, 0px));
    display: flex; align-items: center; gap: 3px;
    background: linear-gradient(135deg,#2a2410,#1a1608);
    color: #f0c840; font-family: 'Courier New', monospace;
    font-size: 11px; font-weight: 700;
    padding: 1px 6px 1px 4px; border-radius: 10px; white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,.6);
    border: 1px solid rgba(255,200,80,.35);
}
.clan-bottom-info { flex: 1; min-width: 0; max-width: 340px; transform: translate(var(--x, 0px), var(--y, 0px)); }
.clan-bottom-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px; letter-spacing: 1px;
    color: #ffffff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    position: relative;
    left: var(--y, 18px);
    top: var(--y,-12px);
}
.clan-bottom-tag { color: #ffffff; }
.clan-bottom-stats {
    font-size: 16px; color: #ffffff;
    font-family: 'Courier New', monospace;
    line-height: 1.5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    position: relative;
    left: var(--y, 100px);
    top: var(--y, -5px);
}
.clan-bottom-coin-icon { width: 12px; height: 12px; vertical-align: middle; margin-right: 2px; }
.clan-bottom-role { color: #7a3e08; }
.clan-bottom-notice {
    margin-top: 2px; font-size: 11px; color: #ffffff; font-style: italic;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    position: relative;
    left: var(--y, 18px);
    top: var(--y, 0px);
}
.clan-bottom-donate-actions {
    display: flex; flex-direction: column; gap: 4px;
    flex-shrink: 0;
    position: relative;
    left: var(--y, 0px);
    top: var(--y, 0px);
}
.clan-bottom-progress-wrap {
    position: relative;
    height: 11px;
    border-radius: 6px;
    background: url('img/clan/clab_progress_bg.webp') center / 100% 100% no-repeat;
    overflow: hidden;
    margin-top: 4px;
    position: relative;
    left: var(--y, 18px);
    top: var(--y, -5px);
}
.clan-bottom-progress-fill {
    height: 100%;
    background: url('img/clan/clab_progress_fill.webp') center / 100% 100% no-repeat;
    transition: width .3s;
    position: relative;
    left: var(--y, 0px);
    top: var(--y, 0px);
}
.clan-bottom-progress-label {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.8);
    position: relative;
    left: var(--y, 0px);
    top: var(--y, 0px);
}
.clan-bottom-progress-label.is-max { color: #ffd700; }

/* ===== Вкладка "Новини" — одна суцільна "сторінка", як на референсі ===== */
.clan-news-layout {
    display: flex;
    gap: 20px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 2; /* поверх .clan-tabs — верх картки перекриває низ вкладок */
}
.clan-news-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.clan-news-scroll {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.clan-news-third {
    width: 174px;
    height: 436px;
    aspect-ratio: auto;
    flex-shrink: 0;
    align-self: flex-start; /* не розтягувати по всій висоті ряду — розмір по картинці */
    background: url('img/clan/clan_bg_rank.webp') center / 100% 100% no-repeat;
    padding: 16px 18px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    top: var(--y, 0px);
    position: relative;
    left: var(--y,0px);
}
.clan-news-third #clan-activity-full {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.clan-activity-rank {
    width: 18px; flex-shrink: 0;
    color: #8a4a12; font-weight: 700; font-size: 11px;
    text-align: right;
}
.clan-paper-card h4.clan-news-title {
    background: none;
    padding: 0 0 10px;
    font-size: 20px;
    text-align: left;
    border-bottom: 2px solid rgba(90,50,10,0.3);
    display: block;
}
#clans-body .clan-news-third h4.clan-news-title {
    letter-spacing: 0;
    white-space: nowrap;
    font-size: 13px;
}
.clan-notice-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: #3a2410;
}
.clan-notice-label { color: #6b3c12; font-weight: 700; flex-shrink: 0; }
.clan-notice-text { flex: 1; min-width: 0; }
.clan-notice-edit-btn {
    background: none; border: none; cursor: pointer;
    font-size: 14px; padding: 0 4px; flex-shrink: 0; margin-left: auto;
}
.clan-notice-textarea {
    width: 100%; height: 80px; padding: 8px; border-radius: 4px;
    background: rgba(255,255,255,0.5); color: #2a1a08; border: 1px solid rgba(90,50,10,0.4);
    font-family: 'Courier New', monospace; font-size: 12px; resize: vertical;
    margin: 6px 0 6px; box-sizing: border-box;
}
.clan-news-divider {
    border: none; border-top: 1px solid rgba(90,50,10,0.35);
    margin: 12px 0;
}
.clan-news-feed {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 2px 6px;
}
.clan-news-date {
    text-align: center; color: #6b3c12; font-weight: 700;
    font-size: 12px; letter-spacing: 1px;
    margin: 14px 0 8px;
}
.clan-news-line {
    padding: 4px 2px;
    font-size: 12px; color: #3a2410; line-height: 1.6;
}
.clan-news-line b { color: #8a4a12; }
.cnl-icon { display: inline-block; width: 14px; height: 14px; object-fit: contain; vertical-align: -2px; }
.clan-news-empty { padding: 14px; text-align: center; color: #6b4a28; font-size: 12px; }

.clan-activity-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 2px; border-bottom: 1px solid rgba(90,50,10,0.15);
    font-size: 12px;
}
.clan-activity-row:last-child { border-bottom: none; }
.clan-activity-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.clan-activity-name { flex: 1; min-width: 0; color: #3a2410; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#clan-donate-modal {
    position: fixed; inset:0;
    background: rgba(0,0,0,.7);
    z-index: 99999;
    display:flex; align-items:center; justify-content:center;
}
#clan-applications-modal .clan-app-modal-content {
    position: relative;
    width: 460px;
    max-width: 92%;
    max-height: 70%;
    background: url('img/clan/bg_modal_zavka_clan.webp') top center / cover no-repeat, #d8c39a;
    border: 3px solid #8a6830;
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 8px 40px rgba(0,0,0,0.75), inset 0 0 0 3px rgba(180,140,80,0.25);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    color: #2a1a08;
}
.clan-app-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px;
    background: rgba(0,0,0,0.15);
    border-bottom: 2px solid rgba(90,50,10,0.3);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px; letter-spacing: 1px;
    color: #6b3c12;
    flex-shrink: 0;
}
.clan-app-modal-close {
    background: none; border: none; cursor: pointer;
    font-size: 16px; color: #6b3c12;
}
.clan-app-modal-body {
    padding: 14px 18px;
    overflow-y: auto;
    max-height: calc(70vh - 50px);
}
.clan-app-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.35);
    border-radius: 6px;
}
.clan-app-row:last-child { margin-bottom: 0; }
.clan-app-info { flex: 1; min-width: 0; color: #2a1a08; }
.clan-app-info small { color: #6b4a28; }
.clan-app-empty { text-align: center; color: #6b4a28; padding: 20px 0; }

/* ══════ Modal_zayavka з clan.psd — повний оверлей канви .game-container
   (1024×768, без "-50" зсуву верхньої панелі, бо Прямокутник 2 в PSD
   покриває весь канвас, включно з місцем під топ-баром). ══════ */
.cv-zayavka-modal { position:absolute; inset:0; z-index:10600; font-family:'Inter',sans-serif; }
.cv-zayavka-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.63); }
.cv-zayavka-outer { position:absolute; left:147px; top:132px; width:646px; height:443px; pointer-events:none; }
.cv-zayavka-inner { position:absolute; left:157px; top:188px; width:637px; height:381px; pointer-events:none; }
.cv-zayavka-title {
    position:absolute; left:440px; top:140px; width:246px; text-align:center;
    font-family:'KatanaBold','Bebas Neue',sans-serif; font-size:35px; color:#000;
    text-shadow:0 2px 4px rgba(0,0,0,.6);
}
.cv-zayavka-close { position:absolute; left:758px; top:188px; width:35px; height:34px; cursor:pointer; }
.cv-zayavka-close:hover { filter:brightness(1.2); }
.cv-zayavka-scroll-track {
    position:absolute; left:742px; top:222px; width:16px; height:329px;
    background-image:url('img/clan/clan/members_clan/modal_zayavka/clan_0003s_0000s_0014_Scrol_bar_bg.webp');
    background-size:100% 100%; background-repeat:no-repeat;
}
.cv-zayavka-scroll-thumb {
    position:absolute; left:1px; top:5px; width:14px; height:62px;
    background-image:url('img/clan/clan/members_clan/modal_zayavka/clan_0003s_0000s_0013_scrollbar.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    cursor:grab;
}
.cv-zayavka-list {
    position:absolute; left:195px; top:222px; width:524px; height:329px;
    overflow-y:auto; overflow-x:hidden;
    scrollbar-width:none;
}
.cv-zayavka-list::-webkit-scrollbar { display:none; }
.cv-zayavka-row {
    position:relative; width:524px; height:95px; margin-bottom:8px;
    background-image:url('img/clan/clan/members_clan/modal_zayavka/clan_0003s_0000s_0018_bgBoss2.webp');
    background-size:100% 100%; background-repeat:no-repeat;
}
.cv-zayavka-avatar-frame { position:absolute; left:20px; top:5px; width:75px; height:80px; pointer-events:none; }
.cv-zayavka-avatar { position:absolute; left:23px; top:13px; width:69px; height:70px; object-fit:cover; border-radius:4px; }
.cv-zayavka-name {
    position:absolute; left:107px; top:9px; width:160px;
    font-size:20px; font-weight:700; color:#2a1808; letter-spacing:.5px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cv-zayavka-stat {
    position:absolute; display:flex; align-items:center; gap:4px;
    font-size:15px; color:#2a1808; font-weight:bold;
}
.cv-zayavka-stat img { object-fit:contain; }
.cv-zayavka-stat-respect { left:276px; top:10px; }
.cv-zayavka-stat-respect img { width:19px; height:23px; }
.cv-zayavka-stat-granade  { left:107px; top:55px; }
.cv-zayavka-stat-granade img { width:19px; height:32px; }
.cv-zayavka-stat-rocket   { left:222px; top:52px; }
.cv-zayavka-stat-rocket img { width:21px; height:41px; }
.cv-zayavka-stat-drone    { left:312px; top:60px; }
.cv-zayavka-stat-drone img { width:51px; height:27px; }
.cv-zayavka-accept, .cv-zayavka-reject {
    position:absolute; top:29px; width:45px; height:38px; border:none; cursor:pointer; padding:0;
    background-image:url('img/clan/clan/members_clan/modal_zayavka/clan_0003s_0000s_0016_button.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    display:flex; align-items:center; justify-content:center;
}
.cv-zayavka-accept { left:408px; }
.cv-zayavka-reject { left:463px; }
.cv-zayavka-accept img, .cv-zayavka-reject img { width:24px; height:24px; pointer-events:none; }
.cv-zayavka-accept:hover, .cv-zayavka-reject:hover { filter:brightness(1.1); }

/* ══════ Modal_donat з clan.psd — теж повний оверлей канви (як Modal_zayavka) ══════ */
.cv-donatem-modal { position:absolute; inset:0; z-index:10600; font-family:'Inter',sans-serif; }
.cv-donatem-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.63); }
.cv-donatem-outer { position:absolute; left:147px; top:132px; width:646px; height:443px; pointer-events:none; }
.cv-donatem-inner { position:absolute; left:157px; top:188px; width:637px; height:381px; pointer-events:none; }
.cv-donatem-title {
    position: absolute;
  left: 462px;
  top: 141px;
  width: 292px;
  text-align: center;
  font-family: 'KatanaBold','Bebas Neue',sans-serif;
  font-size: 32px;
  color: #000;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.cv-donatem-icon { position:absolute; left:397px; top:145px; width:41px; height:40px; pointer-events:none; }
.cv-donatem-close { position:absolute; left:758px; top:188px; width:35px; height:34px; cursor:pointer; }
.cv-donatem-close:hover { filter:brightness(1.2); }
.cv-donatem-input-bg { position:absolute; left:272px; top:347px; width:408px; height:37px; pointer-events:none; }
.cv-donatem-input {
    position:absolute; left:282px; top:350px; width:388px; height:31px;
    background:transparent; border:none; outline:none;
    font-family:'Bebas Neue',sans-serif; font-size:18px; color:#2a1c0c; text-align:center;
    -moz-appearance:textfield; appearance:textfield;
}
.cv-donatem-input::-webkit-outer-spin-button,
.cv-donatem-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.cv-donatem-ok, .cv-donatem-cancel {
    position:absolute; top:408px; width:148px; height:34px; border:none; cursor:pointer; padding:0;
}
.cv-donatem-ok { left:302px; }
.cv-donatem-cancel { left:503px; }
.cv-donatem-ok > img:first-child, .cv-donatem-cancel > img:first-child {
    position:absolute; inset:0; width:100%; height:100%;
}
.cv-donatem-ok-icon { position:absolute; left:16px; top:4px; width:24px; height:27px; }
.cv-donatem-cancel-icon { position:absolute; left:4px; top:6px; width:28px; height:23px; }
.cv-donatem-ok span, .cv-donatem-cancel span {
    position:relative; display:block; padding-left:26px;
    font-family:'Bebas Neue',sans-serif; font-size:14px; color:#f0e8d0;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.cv-donatem-ok:hover, .cv-donatem-cancel:hover { filter:brightness(1.1); }

#clan-donate-modal .clan-modal-content {
    position: relative;
    width: 320px;
    max-width: 90%;
    height: auto;
    background-image: url(img/ui/paper_bg.webp);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    border: 3px solid #8a6830;
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 8px 40px rgba(0,0,0,0.75), inset 0 0 0 3px rgba(180,140,80,0.25);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    color: #1a1208;
    top: auto; left: auto;
}
#clan-donate-modal .clan-modal-content h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px 11px;
    background: rgba(0,0,0,0.20);
    border-bottom: 2px solid rgba(100,70,20,0.4);
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #1a1208;
    letter-spacing: 1px;
}
#clan-donate-modal .clan-modal-content p {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #2a1808;
    text-align: center;
}
#clan-donate-modal .clan-modal-inner-body {
    padding: 20px 24px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
#clan-donate-modal #donate-amount {
    width: 35%;
    padding: 8px 10px;
    border-radius: 7px;
    color: #2a1808;
    font-size: 16px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
    margin: 0;
}
#clan-donate-modal #donate-amount:focus {
    outline: none;
    border-color: #8a6830;
}
#clan-donate-modal .donate-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 4px;
}
#clan-donate-modal .btn-donate-ok {
    padding: 9px 24px;
    border: none;
    border-radius: 7px;
    font-size: 15px;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    cursor: pointer;
    background: linear-gradient(135deg, #c88030, #7a3e08);
    color: #fff8e0;
}
#clan-donate-modal .btn-donate-cancel {
    padding: 9px 24px;
    border: 1px solid rgba(100,70,20,0.4);
    border-radius: 7px;
    font-size: 15px;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    cursor: pointer;
    background: rgba(0,0,0,0.15);
    color: #5a3a10;
}


.open-clans-btn {
    background-image: url("img/ui/clan.webp"); /* твоя PNG іконка */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 65px;   /* підгони під розмір кнопки */
    height: 70px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 14px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease, filter 0.3s ease, transform 0.3s ease;
    position: absolute;
    left: var(--x, 823px);
    top: var(--y, 350px);
}
.open-clans-btn:hover {
    filter: drop-shadow(0 0 8px yellow);
    transform: scale(1.05); /* невелике збільшення */

}

/* Підтвердження (showConfirmModal у clans.js) — у стилі екрана тренувань:
   рвана паперова підкладка traning_0003_Shar-4 і жовті кнопки traning_0002_Shar-6. */
#confirm-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10500;
}
#confirm-modal .modal-content {
    /* скидаємо загальне .modal-content (position:absolute; left:350px; top:50px; margin:80px auto) */
    position: relative;
    top: auto; left: auto;
    margin: 0;
    max-width: none;
    box-shadow: none;
    width: 440px;
    min-height: 150px;
    box-sizing: border-box;
    padding: 30px 40px 26px;
    background: url('img/traning/traning_0003_Shar-4.png') center / 100% 100% no-repeat;
    border: none;
    border-radius: 0;
    text-align: center;
    color: #2a1c08;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6));
}
#confirm-modal #confirm-message {
    margin: 12px 0 0;
    white-space: pre-line; /* 
 у тексті (напр. скидання талантів) — новий рядок */
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: 0.5px;
    color: #2a1c08;
}
#confirm-modal .modal-buttons {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 22px;
}
#confirm-modal button {
    width: 140px; height: 36px;
    padding: 0 0 3px;
    border: none;
    border-radius: 0;
    background: url('img/traning/traning_0002_Shar-6.png') center / 100% 100% no-repeat;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #2a1c04;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}
#confirm-modal button:hover { filter: brightness(1.1); }
#confirm-modal button:active { transform: scale(0.96); }
/* "Ні" — та сама кнопка, приглушена, щоб не плутати з "Так" */
#confirm-modal #confirm-no { filter: grayscale(0.85) brightness(0.92); }
#confirm-modal #confirm-no:hover { filter: grayscale(0.85) brightness(1.02); }

.clan-join-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.clan-join-modal {
    background: #1c1f26;
    padding: 20px;
    border-radius: 10px;
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 255, 204, 0.2);
    max-width: 400px;
    width: 100%;
}

.clan-join-modal textarea {
    width: 100%;
    height: 80px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #444;
    background: #0f1117;
    color: #fff;
    resize: none;
}
/* ===== TALENT BAR — boss fight right panel ===== */
.bfu-tal-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bfu-t-pts {
    font-size: 13px;
    color: #f0d89a;
    font-family: sans-serif;
}
.bfu-t-pts strong {
    color: #ffd700;
    font-size: 16px;
}
.bfu-t-section {
    margin: 8px 0 10px;
    padding: 7px 9px;
    /* Темніший непрозорий бокс (не 0.35, а 0.55) — саме тому текст усередині
       світлий (кремовий), а не темно-коричневий, як решта панелі. */
    background: rgba(0,0,0,0.55);
    border: 1px solid #4a3510;
    border-radius: 6px;
}
.bfu-t-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #e8d0a0;
    margin-bottom: 5px;
    font-family: sans-serif;
}
#bfu-t-bar-pct {
    color: #ffd700;
    font-weight: 700;
}
.bfu-t-bar-wrap {
    width: 100%;
    height: 14px;
    background: rgba(0,0,0,0.5);
    border: 1px solid #5a4020;
    border-radius: 7px;
    overflow: hidden;
}
.bfu-t-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #b85c00, #ff9900, #ffd700);
    border-radius: 7px;
    transition: width 0.5s ease;
    box-shadow: 0 0 8px rgba(255,180,0,0.6);
}
.bfu-t-threshold {
    font-size: 10px;
    color: #c0a878;
    text-align: right;
    margin-top: 4px;
    font-family: sans-serif;
}

/* +T floating notification */
.talent-point-gained {
    position: fixed;
    transform: translateX(-50%);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px;
    color: #ffd700;
    text-shadow: 0 0 20px #ff9900, 2px 2px 0 #000;
    pointer-events: none;
    z-index: 20000;
    animation: tpFloatUp 1.6s ease-out forwards;
}
@keyframes tpFloatUp {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(0.8); }
    15%  { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1.3); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-90px) scale(1); }
}

/* ============================================================
   TALENT TREE MODAL
   ============================================================ */
.tlm-box {
    background: linear-gradient(160deg, #1a1a0e 0%, #2c2416 60%, #1a1a0e 100%);
    border: 2px solid #6b5a2e;
    border-radius: 12px;
    width: min(920px, 96%);
    max-height: 88%;
    overflow-y: auto;
    padding: 18px 20px;
    box-shadow: 0 0 50px rgba(0,0,0,0.9);
    /* scrollbar-width/scrollbar-color НЕ ставимо — Chrome 121+ пріоритизує їх
       над ::-webkit-scrollbar-thumb на тому самому елементі. */
}
.tlm-box::-webkit-scrollbar { width: 15px; }
.tlm-box::-webkit-scrollbar-track { background: transparent; }
.tlm-box::-webkit-scrollbar-thumb {
    background-color: transparent;
    background-image: url('img/medals/hud/scrollbar.webp');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 15px 70px;
    border-radius: 3px;
}

.tlm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    border-bottom: 1px solid #6b5a2e;
    padding-bottom: 10px;
}
.tlm-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    color: #e8d5a0;
    letter-spacing: 2px;
}
.tlm-balance { font-size: 17px; color: #ccc; }
.tlm-balance strong { color: #ffd700; font-size: 20px; }


.tlm-tree {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.tlm-branch { display: flex; flex-direction: column; gap: 0; }

.tlm-branch-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    color: var(--branch-color);
    text-align: center;
    padding: 6px 0 5px;
    border-bottom: 2px solid var(--branch-color);
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.tlm-talent {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 3px solid var(--branch-color);
    border-radius: 6px;
    padding: 9px 10px;
    transition: background 0.15s;
    position: relative;
}
.tlm-talent:hover { background: rgba(255,255,255,0.04); }
.tlm-talent.maxed  { border-left-color: #2ecc71; }
.tlm-talent.locked { opacity: 0.45; }

.tlm-t-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}
.tlm-t-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    color: #ddd;
    letter-spacing: 0.5px;
}
.tlm-t-dots { display: flex; gap: 4px; align-items: center; }
.tlm-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    display: inline-block;
}
.tlm-dot.filled {
    background: var(--branch-color);
    border-color: var(--branch-color);
    box-shadow: 0 0 4px var(--branch-color);
}
.tlm-t-desc {
    font-size: 11px;
    color: #999;
    margin-bottom: 8px;
    line-height: 1.35;
}
/* Прогрес-бар для гілок з великим max_level (>12 рівнів) — крапочки з .tlm-dot
   там фізично не влазять, тому рівень+бонус показуємо смугою (за зразком .bfu-t-bar-*) */
.tlm-t-progress { margin-bottom: 8px; }
.tlm-t-progress-track {
    width: 100%;
    height: 8px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 3px;
}
.tlm-t-progress-fill {
    height: 100%;
    background: var(--branch-color);
    box-shadow: 0 0 6px var(--branch-color);
    transition: width 0.3s ease;
}
.tlm-t-progress-label {
    font-size: 10px;
    color: #bbb;
    font-family: sans-serif;
    text-align: right;
}
/* Elite tiers (4+): glow border */
.tlm-talent.elite {
    border-left-color: #ffd700;
    background: rgba(255, 215, 0, 0.05);
    box-shadow: inset 0 0 12px rgba(255, 215, 0, 0.06);
}
.tlm-talent.elite .tlm-t-name { color: #ffd700; }
.tlm-talent.elite.locked { opacity: 0.4; }
.tlm-t-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tlm-t-cost { font-size: 12px; color: #ffd700; font-weight: bold; }

.tlm-invest-btn {
    background: var(--branch-color);
    border: none;
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.tlm-invest-btn:hover:not(.disabled) { opacity: 0.75; }
.tlm-invest-btn.disabled {
    background: #333;
    cursor: default;
    color: #666;
}

.tlm-connector {
    text-align: center;
    color: #444;
    font-size: 16px;
    line-height: 1;
    padding: 3px 0;
    pointer-events: none;
}

.tlm-footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #3a3020;
    text-align: center;
}
.tlm-reset-btn {
    background: #200e05;
    border: 1px solid #8b4513;
    color: #c88;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 7px 22px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.tlm-reset-btn:hover { background: #3d1a07; }

/* ============================================================
   FRIEND REQUESTS MODAL
   ============================================================ */
.frm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10500;
    display: none;
    align-items: center;
    justify-content: center;
}
.frm-overlay.open { display: flex; }

.frm-overlay-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.72);
}

.frm-card-wrap {
    position: relative;
    width: 637px;
    height: 381px;
}

.frm-box {
    position: absolute; left: 0; top: 0;
    background: url('img/hud/friend_modal/podl.webp') top center / 637px 381px no-repeat;
    width: 637px;
    height: 381px;
    font-family: 'BossDraftFont', 'Bebas Neue', sans-serif;
}

/* Тека-підкладка з ярликом "ЗАЯВКИ" — за .frm-box (координати з PSD мінус зсув podl (199,157)) */
.frm-tab-bg {
    position: absolute; left: -17px; top: -63px; width: 646px; height: 443px;
    pointer-events: none;
}
.frm-tab-title {
    position: absolute; left: 271px; top: -63px; width: 278px; height: 65px;
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    font-family: 'BossDraftFont', 'Bebas Neue', sans-serif;
    font-size: 34px; letter-spacing: 2px; color: #1a1208;
    text-align: center; text-transform: uppercase;
    white-space: nowrap;
}
.frm-tab-hand {
    position: absolute; top: -49px; width: 41px; height: 38px;
    pointer-events: none;
}
.frm-tab-hand-left { left: 223px; }
.frm-tab-hand-right { left: 566px; }

.frm-badge {
    position: absolute;
    left: 600px;
    top: -70px;
    background: #e74c3c;
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    padding: 12 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 2;
}
.frm-close {
    position: absolute;
    left: 594px; top: -7px;
    width: 35px; height: 34px;
    cursor: pointer;
    transition: transform 0.15s;
}
.frm-close:hover { transform: scale(1.1); }

/* Список заявок: ширина 563px = 524px (картка ряду) + 23px (реальний зазор з PSD
   між картками та скролбаром) + 16px (сам скролбар) — так нативний скролбар
   опиняється РІВНО там, де в макеті намальована Scrol_bar_bg (578-594 відносно .frm-box) */
.frm-list {
    position: absolute;
    left: 31px; top: 27px; width: 563px; height: 329px;
    overflow-y: auto;
    overflow-x: hidden;
}
.frm-list::-webkit-scrollbar { width: 16px; background: transparent; }
.frm-list::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.frm-list::-webkit-scrollbar-track {
    background: url('img/hud/friend_modal/scrollbar_track.webp') top center / 16px 329px no-repeat;
}
.frm-list::-webkit-scrollbar-thumb {
    background-color: transparent;
    background-image: url('img/hud/friend_modal/scrollbar_thumb.webp');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 14px 62px;
}

/* Empty state */
.frm-empty {
    text-align: center;
    padding: 36px 20px;
    color: #5a4a30;
}
.frm-empty-icon {
    font-size: 52px;
    display: block;
    margin-bottom: 10px;
    filter: grayscale(1);
}
.frm-empty-text { font-size: 14px; line-height: 1.5; }

/* Request row — точні координати з макету (img/hud/friend_modal/Friend_modal.psd),
   продубльовані 1:1 (PSD-абсолют мінус абсолют bgBoss2 (230,184)), без розтягування */
.frm-req-row {
    position: relative;
    width: 524px;
    height: 95px;
    margin-bottom: 6px;
    background: url('img/hud/friend_modal/row_bg.webp') left top / 524px 95px no-repeat;
}
.frm-req-row.removing {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

/* Фото — ПІД рамкою (icon_avatar.webp малюється зверху, як рамка на фото;
   якщо фото нема — no_avatar.webp підставляється через onerror у JS) */
.frm-avatar-frame {
    position: absolute; left: 20px; top: 5px; width: 75px; height: 80px;
}
.frm-req-avatar {
    position: absolute; left: 3px; top: 8px; width: 69px; height: 70px;
    object-fit: cover;
}
.frm-avatar-frame-overlay {
    position: absolute; left: 0; top: 0; width: 75px; height: 80px;
    pointer-events: none;
}

.frm-req-name {
    position: absolute; left: 107px; top: 9px; width: 130px;
    font-size: 20px;
    color: #2a1808;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.frm-stat {
    position: absolute;
    display: flex; align-items: center; gap: 4px;
    font-size: 15px; color: #2a1808; font-weight: bold;
}
.frm-stat img { object-fit: contain; }
.frm-stat-respect { left: 276px; top: 10px; }
.frm-stat-respect img { width: 19px; height: 23px; }
.frm-stat-granade  { left: 107px; top: 55px; }
.frm-stat-granade img { width: 19px; height: 32px; }
.frm-stat-rocket   { left: 222px; top: 52px; }
.frm-stat-rocket img { width: 21px; height: 41px; }
.frm-stat-drone    { left: 312px; top: 60px; }
.frm-stat-drone img { width: 51px; height: 27px; }

.frm-btn-square {
    position: absolute; top: 29px; width: 45px; height: 38px;
    border: none; background: none; padding: 0; cursor: pointer;
    transition: transform 0.1s, opacity 0.15s;
}
.frm-btn-square:hover { transform: scale(1.05); }
.frm-btn-square > img:first-child { position: absolute; left: 0; top: 0; width: 45px; height: 38px; }
.frm-btn-overlay { position: absolute; left: 10px; top: 5px; width: 24px; height: auto; }
.frm-btn-accept  { left: 408px; }
.frm-btn-decline { left: 463px; }

/* ============================================================
   LEADERBOARD MODAL
   ============================================================ */
.lb-overlay {
    position: fixed;
    inset: 0;
    z-index: 10500;
    display: none;
    align-items: center;
    justify-content: center;
}
.lb-overlay.open { display: flex; }

.lb-overlay-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.80);
}

/* Канвас модалки — 1024×768, ідентично полотну img/Top100/top100.psd.
   Усі діти нижче позиціоновані absolute "піксель-у-піксель" з PSD-координат
   (без адаптивних відступів "на око"). На вузьких/низьких вікнах масштабується
   через transform:scale() (див. _lbFitScale() в js/leaderboard.js) — так
   зберігаються точні пропорції макета замість перекомпоновки в інший layout. */
.lb-box {
    position: relative;
    width: 1024px;
    height: 768px;
    flex-shrink: 0;
    overflow: hidden;
}
.lb-bg-dark {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse at center, rgba(20,15,8,0.35) 0%, rgba(4,3,2,0.72) 100%);
    pointer-events: none;
}

.lb-panel-main  { position: absolute; left: 218px; top: 51px;  width: 620px; height: 564px; z-index: 2; pointer-events: none; }

/* Дві теки-фото зліва — це перемикач ПОВАГА/УРОН (не окремий таб-бар):
   клікабельні картки з PSD-координатами обох стосів (top/top1). */
.lb-sort-card {
    position: absolute; z-index: 1; width: 104px; height: 94px;
    background: transparent; border: none; padding: 0; cursor: pointer;
    filter: grayscale(0.55) brightness(0.82);
    transition: filter 0.15s, transform 0.15s;
}
.lb-sort-card:hover { filter: grayscale(0.2) brightness(0.95); }
/* Активна картка "висувається" — виїжджає вліво з-під панелі й трохи росте. */
.lb-sort-card.active { filter: none; transform: translateX(-16px) scale(1.06); }
#lb-sort-respect { left: 146px; top: 126px; }
#lb-sort-damage  { left: 146px; top: 226px; }
.lb-photo-bg { position: absolute; left: 0; top: 0; width: 104px; height: 94px; pointer-events: none; }
#lb-sort-respect .lb-sort-icon { position: absolute; left: 15px; top: 6px;  width: 52px; height: 63px; pointer-events: none; }
#lb-sort-damage  .lb-sort-icon { position: absolute; left: 12px; top: 14px; width: 48px; height: 47px; pointer-events: none; }

.lb-close {
    position: absolute; z-index: 3; left: 780px; top: 63px; width: 42px; height: 44px;
    background: transparent; border: none; padding: 0; cursor: pointer;
}
.lb-close img { width: 100%; height: 100%; display: block; }
.lb-close:hover { filter: brightness(1.15); }

.lb-title {
    position: absolute; z-index: 3; left: 416px; top: 96px; width: 239px; height: 22px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px; letter-spacing: 1px; text-align: center; text-transform: uppercase;
    color: #241505;
    pointer-events: none;
}

/* Єдиний скрол — п'єдестал (rows 1-3) + шаблонні рядки 4-100 разом, як в
   макеті (скролбар праворуч охоплює весь список суцільно). */
/* Ширина/left звужені до фактичної зони рядків (x250-777) — а не на всю
   канву 1024px — інакше цей (вищий за z-index) контейнер перекривав би
   кліки по темах-перемикачах ПОВАГА/УРОН зліва (x146-270), хоч там і немає
   видимого вмісту списку. */
.lb-list-viewport {
    position: absolute; z-index: 3; left: 250px; top: 126px; width: 527px; height: 450px;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: none;
}
.lb-list-viewport::-webkit-scrollbar { display: none; }
.lb-list-inner { position: relative; }

.lb-row-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

.lb-podium-row { position: absolute; left: 0px; width: 527px; }
.lb-row-1 { top: 0px;   height: 66px; }
.lb-row-2 { top: 65px;  height: 59px; }
.lb-row-3 { top: 122px; height: 61px; }

.lb-tpl-row { position: absolute; left: 34px; width: 487px; height: 35px; }
.lb-tpl-rank {
    position: absolute; left: 4px; top: 6px; width: 22px; height: 21px;
    font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: #fff; text-align: center;
}

/* z-index: рамка малюється ПОВЕРХ фото. Розмір фото рахуй через --lb-avatar-size на
   .lb-avatar-clip — сам контейнер ховає (overflow:hidden) все, що виходить за межі,
   тож фото ніколи не вилазить за рамку, навіть якщо збільшити змінну. */
.lb-avatar-frame { position: absolute; width: 25px; height: 29px; pointer-events: none; z-index: 2; }
.lb-avatar-clip {
    --lb-avatar-size: 24px;
    position: absolute; width: var(--lb-avatar-size); height: var(--lb-avatar-size);
    border-radius: 8%; overflow: hidden; cursor: pointer; background: #222; z-index: 1;
}
.lb-avatar-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb-nickname {
    position: absolute;
    font-family: 'Bebas Neue', sans-serif; font-size: 14px; letter-spacing: 0.3px; color: #1a1208;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.lb-reward-icon { position: absolute; width: 23px; height: 32px; object-fit: contain; pointer-events: none; }
.lb-score {
    position: absolute;
    font-family: 'Bebas Neue', sans-serif; font-size: 13px; font-weight: 700; color: #241505;
    white-space: nowrap;
}

.lb-row-1 .lb-avatar-frame { left: 98px; top: 22px; } .lb-row-1 .lb-avatar-clip { left: 98.5px; top: 24.5px; }
.lb-row-1 .lb-nickname { left: 135px; top: 29px; width: 165px; } .lb-row-1 .lb-reward-icon { left: 361px; top: 21px; }
.lb-row-1 .lb-score { left: 387px; top: 29px; }

.lb-row-2 .lb-avatar-frame { left: 98px; top: 15px; } .lb-row-2 .lb-avatar-clip { left: 98.5px; top: 17.5px; }
.lb-row-2 .lb-nickname { left: 136px; top: 18px; width: 165px; } .lb-row-2 .lb-reward-icon { left: 361px; top: 15px; }
.lb-row-2 .lb-score { left: 389px; top: 23px; }

.lb-row-3 .lb-avatar-frame { left: 98px; top: 18px; } .lb-row-3 .lb-avatar-clip { left: 98.5px; top: 20.5px; }
.lb-row-3 .lb-nickname { left: 134px; top: 20px; width: 165px; } .lb-row-3 .lb-reward-icon { left: 361px; top: 16px; }
.lb-row-3 .lb-score { left: 388px; top: 24px; }

.lb-tpl-row .lb-avatar-frame { left: 64px; top: 3px; } .lb-tpl-row .lb-avatar-clip { left: 64.5px; top: 5.5px; }
.lb-tpl-row .lb-nickname { left: 100px; top: 10px; width: 150px; } .lb-tpl-row .lb-reward-icon { left: 327px; top: 2px; }
.lb-tpl-row .lb-score { left: 353px; top: 10px; font-size: 12px; }

/* Рядок поточного гравця (якщо він у топ-100) — золоте підсвічення силуету
   картки (drop-shadow повторює контур row-bg/аватарки/тексту, а не просто
   прямокутник). Кілька шарів для більш помітного, насиченого світіння. */
.lb-row-mine {
    filter:
        drop-shadow(0 0 2px rgba(255, 224, 130, 0.95))
        drop-shadow(0 0 6px rgba(255, 210, 90, 0.85))
        drop-shadow(0 0 14px rgba(255, 200, 70, 0.6));
}

.lb-loading, .lb-empty {
    position: absolute; left: 250px; top: 190px; width: 527px; text-align: center;
    font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: 1px; color: #cbb676;
}

.lb-scroll-track {
    position: absolute; z-index: 3; left: 780px; top: 138px; width: 16px; height: 438px;
    background-image: url('img/Top100/scrollbar_track.webp'); background-size: 100% 100%; background-repeat: no-repeat;
}
.lb-scroll-thumb {
    position: absolute; left: 2px; top: 6px; width: 13px; height: 58px;
    background-image: url('img/Top100/scrollbar_thumb.webp'); background-size: 100% 100%; background-repeat: no-repeat;
    cursor: grab;
}

/* ================================================================
   COMBAT SYSTEM — бойові дії, лут, кнопка на карті
   ================================================================ */

/* Кнопка на карті */
.open-combat-btn {
     background-image: url("img/ui/war.webp"); /* твоя PNG іконка */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 65px;   /* підгони під розмір кнопки */
    height: 70px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 14px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease, filter 0.3s ease, transform 0.3s ease;
    position: static;
}
.open-combat-btn:hover {
    filter: drop-shadow(0 0 8px yellow);
    transform: scale(1.05); /* невелике збільшення */
}

/* Нагороди в блоку бойових дій */
.combat-rewards {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.cr-item {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(120, 70, 10, 0.13);
    border: 1.5px solid rgba(140, 90, 20, 0.45);
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 13px;
    font-weight: 800;
    color: #3a1e05;
    box-shadow: inset 0 1px 0 rgba(255,220,120,0.25);
}
.cr-item.cr-cigs  { background: rgba(180, 100, 20, 0.15); border-color: rgba(180,100,20,0.5); }
.cr-item.cr-resp  { background: rgba(100, 60, 160, 0.10); border-color: rgba(120,80,180,0.4); }
.cr-item.cr-energy{ background: rgba(30, 120, 200, 0.10); border-color: rgba(30,140,220,0.4); }
.cr-item.cr-loot  { background: rgba(30, 140, 60, 0.10);  border-color: rgba(40,160,70,0.4);  }
.cr-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Кнопка лут у заголовку */
.tm-header-loot-btn {
 background-image: url("img/ui/loot.webp"); /* твоя PNG іконка */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 65px;   /* підгони під розмір кнопки */
    height: 70px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 14px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease, filter 0.3s ease, transform 0.3s ease;
    position: absolute;
    left: var(--x, 824px);
    top: var(--y, 440px);
    z-index: 1100;
}

.tm-header-loot-btn:hover { 
        
    transform: scale(1.05); /* невелике збільшення */ 
}

/* ---- LOOT COLLECTIONS — Turya-стиль (img/collections/turya_ref/) ---- */
.pgc-wrap {
    padding: 12px 12px 230px; /* знизу — щоб останню колекцію можна було доскролити вище #bottom-ui-wrapper (елевується на цій сцені) */
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 100%;
    overflow-y: auto;
    /* scrollbar-width/scrollbar-color НЕ ставимо — Chrome 121+ пріоритизує їх
       над ::-webkit-scrollbar-thumb на тому самому елементі (див. .achievement-
       scroll-wrapper), тому картинка-скролбар нижче просто ігнорувалась би. */
}
.pgc-wrap::-webkit-scrollbar { width: 15px; }
.pgc-wrap::-webkit-scrollbar-track { background: transparent; }
.pgc-wrap::-webkit-scrollbar-thumb {
    background-color: transparent;
    background-image: url('img/medals/hud/scrollbar.webp');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 15px 70px;
    border-radius: 3px;
}
.pgc-collection {
    background: rgba(120,70,10,0.07);
    border: 1.5px solid rgba(140,90,20,0.4);
    border-radius: 8px;
    padding: 10px 12px;
}
.pgc-collection.pgc-complete {
    border-color: rgba(160,100,10,0.75);
    background: rgba(200,140,20,0.13);
}
.pgc-reward-panel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 62px;
    background: url('img/collections/turya_ref/bgMainColect.png') left center / 148px 95px no-repeat;
    padding: 8px 12px 8px 92px;
    margin-bottom: 10px;
}
.pgc-title { font-size: 15px; font-weight: 800; color: #1e0e02; }
.pgc-reward {
    font-size: 13px; font-weight: 700; color: #5a3a10;
    background: rgba(120,70,10,0.1); border: 1px solid rgba(140,90,20,0.35);
    border-radius: 4px; padding: 1px 7px;
}
.pgc-exchange-btn {
    margin-left: auto;
    width: 117px; height: 27px;
    background: url('img/collections/turya_ref/btnColect.png') center/100% 100% no-repeat;
    border: none; color: #3a1e02; font-size: 13px; font-weight: bold;
    cursor: pointer; transition: filter 0.2s;
}
.pgc-exchange-btn:hover { filter: brightness(1.15); }
.pgc-exchange-btn:disabled { opacity: 0.5; cursor: default; }
.pgc-locked { margin-left: auto; font-size: 12px; font-weight: 600; color: #7a5020; font-style: italic; }
.pgc-badge { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; }

.pgc-items { display: flex; gap: 10px; flex-wrap: wrap; }
.pgc-slot { width: 68px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pgc-frame {
    position: relative;
    width: 61px; height: 73px;
    background: url('img/collections/turya_ref/colectBg.png') center/100% 100% no-repeat;
    display: flex; align-items: center; justify-content: center;
}
.pgc-item-img { width: 42px; height: 42px; object-fit: contain; }
.pgc-empty .pgc-item-img { opacity: 0.18; filter: grayscale(1); }
.pgc-check {
    position: absolute; top: 3px; right: 3px;
    width: 19px; height: 19px;
    background: url('img/collections/turya_ref/bgCheckboxColect.png') center/100% 100% no-repeat;
}
.pgc-check.pgc-check-ok {
    background: url('img/collections/turya_ref/uiCheckboxOk.png') center/20px 15px no-repeat;
}
.pgc-qty {
    position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
    font-size: 11px; font-weight: 800; color: #2a1405;
    background: rgba(200,150,50,0.55); border-radius: 3px; padding: 0 4px;
}
.pgc-empty .pgc-qty { color: #9a7040; background: rgba(120,90,50,0.3); }
.pgc-name { font-size: 10px; color: #4a2e10; text-align: center; }

/* ---- ENERGY POPUP ----
   Картка energyadd.webp/_en.webp (нативно 342×396, напис+банка вже вшиті) —
   поверх лише кількість енергетиків і кнопка "Відновити" на вільному місці
   знизу картки, плюс кругла кнопка закриття у верхньому правому куті. */
.energy-pop-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0,0,0,.75);
    display: flex;
    align-items: center;
    justify-content: center;
}
.energy-pop-overlay.hidden { display: none; }
.energy-pop-box {
    position: relative;
    width: 342px;
    height: 396px;
}
.energy-pop-bg {
    position: absolute;
    inset: 0;
    width: 342px;
    height: 396px;
    pointer-events: none;
}
.energy-pop-close-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 43px;
    height: 43px;
    cursor: pointer;
    transition: transform .15s;
}
.energy-pop-close-btn:hover { transform: scale(1.08); }
.energy-pop-have-row {
    position: absolute;
    left: 0;
    right: 0;
    top: 280px;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
    color: #4a2f06;
}
.energy-pop-have-row b { font-size: 22px; color: #a85a00; margin: 0 4px; }
.energy-pop-restore-btn {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    width: 150px;
    height: 48px;
    background: url('img/packs/store/modal_apr/btn.webp') center / 100% 100% no-repeat;
    border: none;
    cursor: pointer;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    letter-spacing: 1.5px;
    color: #4a2306;
    text-shadow: 0 1px 0 rgba(255,220,140,0.4);
    transition: filter .15s;
}
.energy-pop-restore-btn:hover { filter: brightness(1.08); }
.energy-pop-restore-btn:disabled {
    filter: grayscale(0.8) brightness(0.7);
    cursor: not-allowed;
}

/* Кнопка без енергії */
.combat-go-btn.combat-btn-no-energy {
    background: linear-gradient(135deg, #4a3010, #5a3818) !important;
    border-color: #3a2808 !important;
    color: #888 !important;
    cursor: pointer;
    position: relative;
}
.combat-go-btn.combat-btn-no-energy::after {
    content: '⚡';
    position: absolute;
    right: 8px;
    opacity: .6;
}

/* ---- COMBAT RESULT POPUP ---- */
.crp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.crp-overlay.hidden { display: none; }
.crp-inner {
    /* Паперова картка з екрана тренувань (traning_0004_Shar-2, 722x399) */
    position: relative;
    box-sizing: border-box;
    width: 400px;
    min-height: 221px;
    padding: 30px 34px 26px;
    background: url('img/traning/traning_0004_Shar-2.png') center / 100% 100% no-repeat;
    border: none;
    border-radius: 0;
    text-align: center;
    color: #2a1c08;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.7));
}
.crp-title {
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 24px;
    letter-spacing: 1px;
    color: #2a1c08;
    margin-bottom: 14px;
    text-transform: uppercase;
}
.crp-rewards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}
.crp-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 210px;
    padding: 5px 14px;
    background: rgba(90,60,20,0.14);
    border: 1px solid rgba(90,60,20,0.3);
    border-radius: 4px;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 17px;
    color: #2a1c08;
}
.crp-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.crp-loot {
    background: rgba(90,60,20,0.14);
    border: 1px solid rgba(90,60,20,0.3);
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 16px;
}
.crp-loot-label {
    font-size: 12px;
    color: #6a4a20;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.crp-loot-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
/* Використовується лише попапом результату бою (combat.js: showLootPopup/showCompletionPopup) —
   колекції тепер мають свій окремий .pgc-* стиль, не чіпати цей блок при їх правках. */
.loot-box-wrap {
    position: relative;
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loot-box-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.85;
}
.loot-item-img {
    position: relative;
    z-index: 1;
    width: 70px;
    height: 70px;
    object-fit: contain;
}
.crp-loot-name {
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 15px;
    color: #2a1c08;
}
.crp-loot-coll {
    font-size: 11px;
    color: #6a4a20;
}
.crp-close-btn {
    /* та сама жовта кнопка, що "Тренування..." / "В бій!" */
    width: 156px; height: 36px;
    padding: 0 0 3px;
    background: url('img/traning/traning_0002_Shar-6.png') center / 100% 100% no-repeat;
    border: none;
    border-radius: 0;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 18px;
    letter-spacing: 0.5px;
    color: #2a1c04;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}
.crp-close-btn:hover { filter: brightness(1.1); }
.crp-close-btn:active { transform: scale(0.96); }

/* ---- Completed badge & unlock hint ---- */
.cb-completed-badge {
    display: inline-block;
    margin-top: 6px;
    background: rgba(40, 120, 40, 0.15);
    border: 1.5px solid rgba(60, 160, 60, 0.55);
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 800;
    color: #1e5a18;
}
.cb-unlock-hint {
    font-size: 11px;
    color: #6a4820;
    font-style: italic;
    font-weight: 600;
    margin-left: 6px;
    align-self: center;
}
/* Combat progress bar — orange/red */
.combat-block .training-progress-fill {
    background: linear-gradient(90deg, #d04010, #f07030);
}
.combat-block .training-progress-text {
    font-size: 13px;
    font-weight: 800;
    color: #3a1e05;
}
.combat-block .training-progress-bar {
    height: 18px;
    border-radius: 9px;
    border-color: rgba(160,70,20,0.5);
    background: rgba(0,0,0,0.1);
}
/* Combat stamp bigger + more visible */
.combat-block .tb-stamp-circle {
    width: 76px;
    height: 76px;
    font-size: 11px;
    opacity: 0.9;
    border-width: 3px;
}
/* Title bigger for combat */
.combat-block .tb-title {
    font-size: 18px;
    color: #1a0e04;
}
.combat-block .tb-holds {
    font-size: 12px;
    color: #7a4a10;
    font-weight: 700;
}

.inv-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px 0;
    background: rgba(0,0,0,0.3);
}
.inv-tab {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #aaa;
    padding: 5px 14px;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.inv-tab.active {
    background: rgba(255,180,0,0.2);
    border-color: #ffb400;
    color: #ffb400;
}
.inv-locations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 14px;
    max-height: 300px;
    overflow-y: auto;
}
.inv-loc-item {
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.15s;
}
.inv-loc-item:hover { border-color: #ffb400; }
.inv-loc-item.active { border-color: #00ff88; }
.inv-loc-item img { width: 100%; height: 70px; object-fit: cover; display: block; }
.inv-loc-label { font-size: 10px; color: #ccc; text-align: center; padding: 3px 4px; background: rgba(0,0,0,0.7); }
.inv-loc-badge {
    position: absolute;
    top: 4px; right: 4px;
    background: #00ff88;
    color: #000;
    font-size: 11px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 4px;
}

/* ===== Бойові дії: locked overlay ===== */
.combat-btn-wrapper {
    position: absolute;
    left: var(--x, 903px);
    top: var(--y, 400px);
    width: 65px;
    height: 70px;
}
.combat-locked-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: not-allowed;
    border-radius: 6px;
    z-index: 5;
    pointer-events: all;
}
.combat-lock-tooltip {
    color: #fff;
    font-size: 10px;
    text-align: center;
    padding: 2px 5px;
    line-height: 1.3;
    text-shadow: 0 1px 3px #000, 0 0 6px #000;
    margin-top: 2px;
}
.combat-lock-tooltip::before {
    content: "🔒";
    display: block;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 2px;
}

/* ===== БР badge on boss cards ===== */
.br-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 5px;
    margin-top: 6px;
}
.br-badge.br-ok    {  color: #145a20;  }
.br-badge.br-missing {  color: #8a1010;  }

/* ===== Pre-fight modal — full-screen (1024x768), за макетом img/bosses/modal_boss/modal.psd ===== */
.pf-scene {
    position: absolute;
    top: 0; left: 0;
    width: 1024px; height: 768px;
    z-index: 9999; /* нижче .top-panel (10001) — верхня панель має лишатись видимою поверх */
    font-family: 'BossDraftFont', 'Bebas Neue', sans-serif;
}
.pf-scene.hidden { display: none; }
.pf-bg { position: absolute; top: 0; left: 0; width: 1024px; height: 768px; object-fit: cover; }
.pf-dossier { position: absolute; left: 28px; top: 106px; width: 512px; height: 569px; }
.pf-stencil { position: absolute; left: 157px; top: 92px; width: 239px; height: 277px; }
.pf-photo-frame {
    position: absolute; left: 90px; top: 272px; width: 186px; height: 190px;
    overflow: hidden; border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transform: rotate(341deg); /* нахил, як полароїд-фото в теці на макеті */
}
.pf-photo { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}
.pf-name {
    position: absolute; left: 130px; top: 178px; width: 187px; height: 82px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 26px; color: #1a1208; letter-spacing: 1px; line-height: 1;
    transform: rotate(341deg);
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.pf-target-num {
    position: absolute; left: 253px; top: 238px; width: 132px; height: 60px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 22px; color: #7a1010; transform: rotate(343deg);
}
.pf-location-text {
    position: absolute; left: 181px; top: 520px; width: 303px; height: 101px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 17px; color: #8a1010; line-height: 1.3; transform: rotate(344deg);
}

.pf-metal-panel { position: absolute; left: 548px; top: 74px; width: 387px; height: 537px; }
.pf-close-btn { position: absolute; left: 975px; top: 57px; width: 35px; height: 34px; cursor: pointer; transition: transform 0.15s; }
.pf-close-btn:hover { transform: scale(1.1); }
.pf-info-title {
    position: absolute; left: 624px; top: 80px; width: 232px; height: 33px;
    text-align: center; font-size: 24px; color: #e8e0d0; letter-spacing: 2px;
    text-shadow: 0 0 6px rgba(255,255,255,0.5);
}
.pf-target-name {
    position: absolute; left: 649px; top: 115px; width: 179px; height: 27px;
    text-align: center; font-size: 16px; color: #d8cfc0; letter-spacing: 0.5px;
}
.pf-reward-title {
    position: absolute; left: 642px; top: 170px; width: 201px; height: 33px;
    text-align: center; font-size: 20px; color: #e8e0d0; letter-spacing: 1.5px;
}
.pf-podl { position: absolute; left: 567px; top: 210px; width: 345px; height: 209px; }

.pf-rewards { position: absolute; left: 610px; top: 210px; width: 331px; height: 195px; }
.pf-rw-row {
    position: absolute; left: 0; display: flex; align-items: center; gap: 8px;
    font-size: 20px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.pf-rw-row img { flex-shrink: 0; object-fit: contain; }

.pf-br-status {
    position: absolute; left: 594px; top: 494px; width: 331px;
    padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 700;
    text-align: center;
}
.pf-br-status.br-ok      { 
    background: rgb(0 255 92 / 26%); 
    color: #ffffff; 
    position: relative;
    top: var(--y,140px);
    left: var(--y, 560px);
}
.pf-br-status.br-missing { 
    background: rgba(180,30,30,0.2); 
    color: #ffc0c0; 
    position: relative;
    top: var(--y,140px);
    left: var(--y, 560px);
}
.pf-br-status.br-free    { display: none; }

.pf-choice-row {
    position: absolute; left: 613px; width: 260px; height: 38px;
    display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.pf-checkbox-bg { 
    position: relative; 
    width: 36px; 
    height: 38px;
    top: var(--y,0px);

}
.pf-checkmark { position: absolute; left: -3px; top: -4px; width: 42px; height: 46px; pointer-events: none; }
.pf-choice-lbl { font-size: 16px; color: #e8e0d0; letter-spacing: 0.5px; }

.pf-attack-btn {
    position: absolute;
    left: 601px;
    top: 515px;
    width: 263px;
    height: 74px;
    background: url(img/bosses/modal_boss/btn_attack_bg.webp) center / 263px 74px no-repeat;
    border: none;
    cursor: pointer;
    font-family: 'BossDraftFont', 'Bebas Neue', sans-serif;
    font-size: 24px;
    color: #4a2306;
    letter-spacing: 2px;
}
.pf-attack-btn:hover:not(:disabled) { filter: brightness(1.1); }
.pf-attack-btn:disabled { filter: grayscale(0.6) brightness(0.7); cursor: not-allowed; }

/* ===== Game item tooltip ===== */
#game-item-tooltip {
    max-width: 220px;
    min-width: 150px;
}
.gitip-inner {
    background-image: url(img/ui/paper_bg.webp);
    background-size: cover;
    background-position: center;
    border: 2px solid #8a6830;
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(200,160,80,0.2);
    padding: 8px 12px;
    font-family: 'Bebas Neue', 'Inter', sans-serif;
    color: #1a1208;
}
.gitip-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(120,90,30,0.15);
}
.gitip-row:last-child { border-bottom: none; }
.gitip-icon { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.gitip-lbl { flex: 1; color: #3a2008; font-size: 12px; letter-spacing: 0.5px; }
.gitip-val { font-weight: 700; color: #1a1208; font-size: 13px; white-space: nowrap; }
.gitip-clan .gitip-lbl { color: #1a5020; }
.gitip-clan .gitip-val { color: #1a5020; }
.gitip-crit .gitip-lbl { color: #8a1010; }
.gitip-crit .gitip-val { color: #8a1010; }
.gitip-avail .gitip-lbl { color: #5a3a10; font-size: 11px; }
.gitip-avail .gitip-lbl { color: #5a3a10; font-size: 11px; }
.gitip-avail .gitip-val { color: #5a3a10; font-size: 11px; }
.gitip-sep { border-bottom: none !important; padding: 0 !important; }
.gitip-sep .gitip-lbl { color: rgba(120,90,30,0.3); font-size: 8px; letter-spacing: 0; }
.gitip-expected .gitip-lbl { color: #7a5010; font-weight: 700; }
.gitip-expected .gitip-val { color: #7a5010; font-size: 14px; font-weight: 700; }

.ppp-close-btn {
    position: absolute;
    top: 8px; right: 8px;
    width: 38px; height: 38px;
    cursor: pointer;
    z-index: 30;
    filter: brightness(1.25) drop-shadow(0 2px 4px rgba(0,0,0,0.6));
    transition: transform 0.2s ease, filter 0.2s ease;
}
.ppp-close-btn:hover { transform: scale(1.1); filter: brightness(1.5) drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }

.tm-exit-btn {
    position: absolute;
    top: 10px; right: 10px;
    width: 36px; height: 36px;
    cursor: pointer;
    z-index: 30;
    filter: brightness(1.25) drop-shadow(0 2px 4px rgba(0,0,0,0.6));
    transition: transform 0.2s ease, filter 0.2s ease;
}
.tm-exit-btn:hover { transform: scale(1.1); filter: brightness(1.5) drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }


/* ======================================================
   MOBILE / TELEGRAM MINI APP — тільки для body.tg-app
   ====================================================== */

/* Прибрати нативні затримки тапу */
body.tg-app {
    touch-action: pan-x pan-y;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden !important;
    background: transparent !important;
}

/* Прибрати видимий контейнер — гра вливається в фон телефону */
body.tg-app .game-container {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Ховаємо правий панель — замість нього буде floating menu */
body.tg-app .right-panel {
    display: none !important;
}

/* Центральна зона займає весь main-panel */
body.tg-app .main-panel {
    position: relative;
}

/* Ховаємо порожній bottom-panel (polk-slot) — він зміщує центр персонажа вліво */
body.tg-app .bottom-panel {
    display: none !important;
}

/* .center займає всю ширину і центрує персонажа */
body.tg-app .center {
    width: 100%;
    justify-content: center;
    align-items: center;
}

/* === HUD винесений поза трансформований контейнер === */
/* top-panel фіксований вгорі viewport */
body.tg-hud-extracted .top-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 99999 !important;
    transform: none !important;
    overflow: visible !important;
}

/* bottom-ui-wrapper фіксований внизу viewport */
body.tg-hud-extracted #bottom-ui-wrapper {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 99999 !important;
    transform: none !important;
}


/* ☰ Кнопка навігації — flex-елемент всередині .top-panel (не fixed overlay) */
#tg-nav-btn {
    display: none;
    flex-shrink: 0;
    margin-left: auto;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.55);
    border: 2px solid #5f753c;
    border-radius: 8px;
    color: #c1ff72;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
body.tg-app #tg-nav-btn {
    display: flex;
}

/* Overlay навігаційного меню */
#tg-nav-overlay {
    display: none;
    position: fixed;
    top: 0; right: 0;
    width: 215px;
    height: 100%;
    background: linear-gradient(180deg, #2a1c0a 0%, #180e04 100%);
    border-left: 2px solid #8a6830;
    z-index: 8100;
    overflow-y: auto;
    padding: 58px 9px 16px;
    box-shadow: -4px 0 24px rgba(0,0,0,0.85);
    flex-direction: column;
    gap: 5px;
}
#tg-nav-overlay.tg-nav-open {
    display: flex;
}

/* Кнопка закрити overlay */
#tg-nav-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.3);
    border: 1px solid #6a4d2f;
    border-radius: 50%;
    color: #c8a84b;
    font-size: 18px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
}

/* Кнопки всередині overlay — стилі в кінці файлу */
#tg-nav-overlay button {
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
}

/* =========================================
   TELEGRAM MOBILE — компактна топ-панель
   ========================================= */
body.tg-hud-extracted .top-panel {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    gap: 6px;
    min-height: 48px;
    background: linear-gradient(180deg, #4a2c0e 0%, #1c1006 100%);
    border-bottom: 2px solid #6b3c12;
}

/* Приховуємо зайве на мобільному */
body.tg-hud-extracted .tp-emblem-wrap,
body.tg-hud-extracted .tp-right,
body.tg-hud-extracted .tp-rename-btn,
body.tg-hud-extracted .tp-xp-strip,
body.tg-hud-extracted .tp-clan-tag,
body.tg-hud-extracted .tp-clan-level,
body.tg-hud-extracted #tp-emblem-tag,
body.tg-hud-extracted .tp-slot-caret,
body.tg-hud-extracted .tp-tooltip { display: none !important; }

/* Identity — компактно */
body.tg-hud-extracted .tp-identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 90px;
    flex-shrink: 0;
}
body.tg-hud-extracted .tp-username {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 85px;
}
body.tg-hud-extracted .tp-lvl-row {
    font-size: 10px;
    opacity: 0.8;
}

/* Stats — рядком, компактно */
body.tg-hud-extracted .tp-stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex: 1;
}
body.tg-hud-extracted .tp-stat {
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    padding: 3px 6px;
}
body.tg-hud-extracted .tp-icon {
    width: 16px;
    height: 16px;
}
body.tg-hud-extracted .tp-stat-val {
    font-size: 12px;
    font-family: 'Bebas Neue', sans-serif;
    color: #f5d78e;
}
body.tg-hud-extracted .tp-slot-val {
    font-size: 12px;
    font-family: 'Bebas Neue', sans-serif;
    color: #f5d78e;
}
body.tg-hud-extracted .tp-slot-img { width: 14px; height: 14px; }
body.tg-hud-extracted .tp-slot-emoji { font-size: 14px; line-height: 1; }

/* ☰ кнопка — вже є flex-елементом у .top-panel, додаткові overrides не потрібні */

/* Bottom HUD компактний */
body.tg-hud-extracted #bottom-ui-wrapper {
    padding: 4px 0;
    background: rgba(10, 16, 5, 0.92);
    border-top: 1px solid #3a4a20;
}
body.tg-hud-extracted .bottom-hud {
    gap: 6px;
    padding: 4px 8px;
}
body.tg-hud-extracted .bottom-hud button {
    width: 48px;
    height: 48px;
    min-height: 48px;
}
body.tg-hud-extracted .bottom-hud button img {
    width: 28px;
    height: 28px;
}
/* Панель друзів в Telegram — компактна, під bottom-hud */
body.tg-hud-extracted #friends-bar {
    display: flex !important;
    min-height: 58px !important;
    padding: 4px 8px !important;
    gap: 6px !important;
    border-radius: 0 !important;
    background: rgba(10, 16, 5, 0.88) !important;
    box-shadow: none !important;
    border-top: 1px solid #2a3515 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    
}
body.tg-hud-extracted .friend-slot {
    min-width: 44px !important;
    padding: 2px 2px 2px !important;
    gap: 1px !important;
}
body.tg-hud-extracted .friend-slot-avatar {
    width: 36px !important;
    height: 36px !important;
}
body.tg-hud-extracted .friend-slot-name {
    font-size: 9px !important;
    max-width: 44px !important;
}
body.tg-hud-extracted .friend-crown-icon {
    width: 16px !important;
    height: 16px !important;
    top: -8px !important;
}
body.tg-hud-extracted .friend-slot-num {
    min-width: 12px !important;
    height: 12px !important;
    font-size: 8px !important;
    line-height: 10px !important;
}

/* На вузьких екранах — scrollable панелі */
@media (max-width: 768px) {
    /* Мінімальний розмір tap target для пальця */
    button, .btn, .nav-btn, .bottom-hud button {
        min-height: 40px;
    }

    /* Scrollable списки у модалках */
    .bfu-evlist,
    .sp-grid,
    .inventory-grid {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Boss fight items — легше натиснути */
    .attack-button {
        min-width: 52px;
        min-height: 52px;
    }
}

/* =========================================================
   TG / MOBILE — адаптація для body.tg-hud-extracted
   ========================================================= */

/* --- Всі modal-training-inner — вужчі (детальніші правила нижче) --- */

/* --- Prefight (картка боса) --- тепер .pf-scene, full-screen 1024x768,
   масштабується разом з усім .game-container — окремих mobile-правил не треба. */

/* --- Досягнення (детальніші правила нижче) --- */
body.tg-hud-extracted .achievement-tab-btn {
    padding: 4px 10px !important;
    font-size: 12px !important;
}

/* --- Boss fight: HP блок по центру + Exit в зоні видимості --- */
/* Приховати бокові панелі (рейтинг + таланти) */
body.tg-hud-extracted .bfu-side {
    display: none !important;
}
/* Boss fight UI — детальніші правила в кінці файлу */

/* --- Колекції: сітка в один рядок --- */
body.tg-hud-extracted .pgc-wrap {
    max-height: 60vh !important;
}
body.tg-hud-extracted .pgc-items {
    flex-wrap: nowrap !important;
    gap: 4px !important;
}
body.tg-hud-extracted .pgc-slot {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
}
body.tg-hud-extracted .pgc-frame {
    width: 100% !important;
    aspect-ratio: 61 / 73 !important;
}
body.tg-hud-extracted .pgc-name {
    font-size: 8px !important;
}

/* --- tp-slot-menu дропдаун видимий (overflow: visible на top-panel вже виправлено вище) --- */
body.tg-hud-extracted .tp-slot-menu {
    z-index: 200000 !important;
    min-width: 120px !important;
}

/* --- Полігон + Бойові дії scroll (sp-grid детально нижче) --- */
body.tg-hud-extracted .bfu-rtable,
body.tg-hud-extracted .bfu-evlist {
    max-height: 160px !important;
    overflow-y: auto !important;
}

/* --- Shop modal (детальніші правила нижче) --- */

/* --- Slot-B dropdown — відкривається вліво, щоб не виходити за межі --- */
body.tg-hud-extracted #slot-b-menu {
    left: auto !important;
    right: 0 !important;
}

/* --- Boss selection panel (детальніші правила в кінці файлу) --- */
/* Приховати колонку "Останній переможець" — звільняє місце */
body.tg-hud-extracted .bc-winner {
    display: none !important;
}
/* Детальніші правила boss-card — в кінці файлу */
body.tg-app #char-body {
    z-index: 1 !important;
    top: 600px !important;
    left: -380px !important;
}
/* Головний убір — повна канва 1186×880, тож координати ті самі, що й у тіла */
body.tg-app #char-helmet {
    z-index: 6 !important;
    top: 600px !important;
    left: -380px !important;
}
body.tg-app #char-armor {
    z-index: 4 !important;
    top: 910px !important;
    left: -200px !important;
}
body.tg-app #char-pants {
    z-index: 3 !important;
    top: 1500px !important;
    left: -200px !important;
}
body.tg-app #char-hand {
    z-index: 5 !important;
    top: 600px !important;
    left: -380px !important;
}

/* ── Telegram: розмір модальних вікон ───────────────────
   position:fixed модалки рендеряться у реальному вьюпорті,
   а не в масштабованій грі — тому потрібні vw/vh одиниці
   ──────────────────────────────────────────────────── */

/* Загальний контейнер modal-training-inner */
body.tg-hud-extracted .modal-training-inner {
    width: min(480px, 94vw) !important;
    max-height: 82vh !important;
    overflow-y: auto !important;
    font-size: 13px !important;
}

/* Заголовок менший */
body.tg-hud-extracted .tm-header {
    padding: 10px 14px 8px !important;
}
body.tg-hud-extracted .tm-header-title {
    font-size: 17px !important;
}

/* Магазин (.sp-modal) */
body.tg-hud-extracted .sp-modal {
    width: min(480px, 94vw) !important;
    max-height: 84vh !important;
}
body.tg-hud-extracted .sp-header {
    padding: 10px 14px 8px !important;
}
body.tg-hud-extracted .sp-title {
    font-size: 17px !important;
}
body.tg-hud-extracted .sp-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
body.tg-hud-extracted .sp-item {
    padding: 8px 6px !important;
}
body.tg-hud-extracted .sp-item-name {
    font-size: 11px !important;
}
body.tg-hud-extracted .sp-item-price {
    font-size: 12px !important;
}

/* Battle Pass (.bp-modal-content) */
body.tg-hud-extracted .bp-modal-content {
    width: min(700px, 94vw) !important;
    max-height: 84vh !important;
    overflow-y: auto !important;
    padding: 16px !important;
}

body.tg-hud-extracted .pm-pack {
    padding: 10px 8px !important;
}
body.tg-hud-extracted .pm-pack-price {
    font-size: 13px !important;
}

/* Клани */
body.tg-hud-extracted .clan-modal-inner {
    width: min(500px, 94vw) !important;
    max-height: 84vh !important;
    overflow-y: auto !important;
}

/* Тренування + Бойові дії */
body.tg-hud-extracted #trainingModal .modal-training-inner,
body.tg-hud-extracted #combatModal .modal-training-inner {
    width: min(460px, 94vw) !important;
}

/* Лут */
/* Досягнення */

/* Магазин внутрішньої валюти (якщо окремий) */
body.tg-hud-extracted #currency-modal .modal-training-inner,
body.tg-hud-extracted .currency-modal-inner {
    width: min(420px, 94vw) !important;
    max-height: 82vh !important;
    overflow-y: auto !important;
}

/* ── Telegram Nav Overlay — ігровий стиль кнопок ─────── */
#tg-nav-overlay button:not(#tg-nav-close) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: left !important;
    padding: 7px 10px !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    background: linear-gradient(180deg, #3d2a10 0%, #261808 100%) !important;
    border: 1px solid #6a4d2f !important;
    border-bottom-color: #3a2810 !important;
    border-radius: 4px !important;
    color: #f0d890 !important;
    font-family: 'Bebas Neue', 'Arial', sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 0.8px !important;
    box-shadow: inset 0 1px 0 rgba(255,220,100,0.07), 0 2px 5px rgba(0,0,0,0.6) !important;
    transition: filter 0.15s, transform 0.1s !important;
}

#tg-nav-overlay button:not(#tg-nav-close):hover {
    filter: brightness(1.25) !important;
    border-color: #c8a84b !important;
}

#tg-nav-overlay button:not(#tg-nav-close):active {
    transform: scale(0.97) !important;
    filter: brightness(0.85) !important;
}

/* Battle Pass — синьо-фіолетовий акцент */
#tg-nav-overlay button.tgnav-bp {
    background: linear-gradient(180deg, #1e2240 0%, #12162e 100%) !important;
    border-color: #6070bb !important;
    color: #aabcff !important;
}

/* Premium — золотий акцент */
#tg-nav-overlay button.tgnav-premium {
    background: linear-gradient(180deg, #3a2c06 0%, #24180202 100%) !important;
    border-color: #c8a84b !important;
    color: #ffd96e !important;
}

/* Іконки всередині кнопок */
#tg-nav-overlay button .rp-icon {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8)) !important;
}

/* ── TG-nav language switcher ─────────────────────────── */
.tgnav-lang-switch {
    display: flex;
    gap: 7px;
    padding: 0 0 10px;
    border-bottom: 1px solid #6a4d2f;
    margin-bottom: 5px;
}
.tgnav-lang-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(180deg, #3d2a10 0%, #261808 100%);
    border: 1px solid #6a4d2f;
    color: #f0d890;
    border-radius: 5px;
    padding: 6px 4px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: filter 0.15s;
}
.tgnav-lang-btn img {
    width: 22px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.2);
    display: block;
}
.tgnav-lang-btn:hover, .tgnav-lang-btn.active {
    filter: brightness(1.3);
    border-color: #c8a84b;
}

/* Заголовок секції */
#tg-nav-overlay h3 {
    font-family: 'Bebas Neue', 'Arial', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    color: #c8a84b !important;
    text-transform: uppercase !important;
    padding: 2px 4px 1px !important;
    border-bottom: 1px solid #6a4d2f !important;
    margin: 2px 0 1px !important;
    line-height: 1.4 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9) !important;
}

body.tg-app #char-shirt {
    z-index: 3 !important;
    top: 885px !important;
    left: -460px !important;
    width: 1130px !important;
}
/* ── Інвентар та Вибір Боса: position:fixed у вьюпорті ─── */
body.tg-hud-extracted #inventory-panel {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(520px, 94vw) !important;
    max-height: 82vh !important;
    overflow: hidden !important;
    /* НЕ ставимо display: flex тут — display контролюється JS через inline style */
}
body.tg-hud-extracted .inv-body {
    max-height: 55vh !important;
    overflow-y: auto !important;
}
body.tg-hud-extracted #inventory-panel .inventory-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
}
body.tg-hud-extracted #inventory-panel .inventory-grid .item {
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
}
body.tg-hud-extracted #boss-selection-panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
}
body.tg-hud-extracted #boss-list-scroll {
    grid-template-columns: 1fr !important;
}

/* ── Boss-card в tg-режимі: вміщаємо portrait+main+reward ─ */
body.tg-hud-extracted .boss-card {
    margin: 8px 8px 4px !important;
}
/* Portrait: вузьке — лише аватар */
body.tg-hud-extracted .bc-portrait {
    width: 74px !important;
    padding: 6px 4px !important;
}
body.tg-hud-extracted .bc-danger-vert {
    display: none !important;
}
body.tg-hud-extracted .bc-mug-frame {
    width: 52px !important;
    height: 59px !important;
}
body.tg-hud-extracted .bc-name-plate {
    font-size: 10px !important;
    padding: 2px 6px !important;
}
body.tg-hud-extracted .boss-card .attack-boss-btn {
    height: 30px !important;
    font-size: 11px !important;
}
/* Reward: залишок простору, не обрізати */
body.tg-hud-extracted .bc-reward {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 6px 6px !important;
    overflow: visible !important;
}
body.tg-hud-extracted .bc-rw-title {
    font-size: 11px !important;
    letter-spacing: 1px !important;
    margin-bottom: 4px !important;
}
body.tg-hud-extracted .bc-rw-val {
    font-size: 14px !important;
}
body.tg-hud-extracted .bc-rw-key {
    font-size: 10px !important;
}

/* ── Boss Fight UI: fixed у вьюпорті між HUD-панелями ───── */
body.tg-hud-extracted #boss-fight-ui {
    position: fixed !important;
    top: var(--tg-top-h, 50px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: var(--tg-bot-h, 65px) !important;
    width: min(420px, 96vw) !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    z-index: 8500 !important;
    overflow: hidden !important;
}

/* Бос — по центру, займає до 60% висоті вікна */
body.tg-hud-extracted .bfu-boss-img {
    left: 50% !important;
    top: 42% !important;
    height: 55% !important;
    max-height: 260px !important;
}

/* HP + таймер — рядок зверху */
body.tg-hud-extracted .boss-top-bar {
    position: absolute !important;
    top: 6px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: min(320px, 92vw) !important;
}
body.tg-hud-extracted .boss-hp-block {
    width: 100% !important;
    padding: 8px 10px !important;
    gap: 6px !important;
}
body.tg-hud-extracted .boss-hp-bar,
body.tg-hud-extracted .boss-timer-bar-wrap {
    height: 20px !important;
}
body.tg-hud-extracted .bhb-bar-text {
    font-size: 11px !important;
}

/* Кнопка виходу — правий верхній кут */
body.tg-hud-extracted #boss-exit-btn {
    position: fixed !important;
    top: calc(var(--tg-top-h, 50px) + 8px) !important;
    right: 8px !important;
    left: auto !important;
    width: 36px !important;
    height: 36px !important;
    z-index: 8600 !important;
}

/* Низ: кнопка УДАР + предмети */
body.tg-hud-extracted .bfu-bottom {
    padding: 4px 6px !important;
    gap: 3px !important;
    align-items: center !important;
}
body.tg-hud-extracted .bfu-mid {
    gap: 3px !important;
    width: 100% !important;
}
body.tg-hud-extracted .bfu-atk-btn {
    width: 80px !important;
    height: 80px !important;
}
body.tg-hud-extracted .bfu-items-row {
    gap: 4px !important;
    padding: 4px 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}
body.tg-hud-extracted .bfu-items-row::-webkit-scrollbar { display: none !important; }
body.tg-hud-extracted .bfu-item-slot {
    width: 50px !important;
    height: 50px !important;
    flex-shrink: 0 !important;
}
body.tg-hud-extracted .bfu-item-slot img {
    width: 34px !important;
    height: 34px !important;
}
body.tg-hud-extracted .bfu-item-count {
    font-size: 10px !important;
}
/* Бос — менший щоб не перекривав кнопки */
body.tg-hud-extracted .bfu-boss-img {
    top: 38% !important;
    height: 44% !important;
    max-height: 220px !important;
}
/* HP-блок компактніший */

/* ===== TELEGRAM: Leaderboard — .lb-box масштабується цілком (transform:scale
   рахує _lbFitScale() в js/leaderboard.js), тому тут окремий компактний
   layout не потрібен — пропорції макета лишаються точними на будь-якому екрані. */

/* ============================================================
   FAQ MODAL
   ============================================================ */

/* Modal size */
.faq-inner {
    width: min(600px, 96vw);
    max-height: 80vh;
}

/* Header icon */
.faq-header-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    opacity: 0.9;
}

/* ---- Category tabs ---- */
.faq-cat-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 14px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #a07840 transparent;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(100,70,20,0.25);
    background: rgba(0,0,0,0.06);
}
.faq-cat-tabs::-webkit-scrollbar { height: 4px; }
.faq-cat-tabs::-webkit-scrollbar-thumb { background: #a07840; border-radius: 2px; }

.faq-cat-tab {
    white-space: nowrap;
    padding: 5px 13px;
    border-radius: 20px;
    border: 1px solid #a07840;
    background: rgba(255,255,255,0.18);
    color: #4a2e08;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.faq-cat-tab:hover {
    background: rgba(160,120,64,0.25);
}
.faq-cat-tab--active {
    background: linear-gradient(135deg, #c88030, #7a3e08);
    color: #fff8e0;
    border-color: #7a3e08;
}

/* ---- Accordion list ---- */
.faq-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: #a07840 transparent;
}
.faq-list::-webkit-scrollbar { width: 5px; }
.faq-list::-webkit-scrollbar-thumb { background: #a07840; border-radius: 3px; }

/* ---- Single accordion item ---- */
.faq-item {
    border: 1px solid rgba(140,100,40,0.35);
    border-radius: 8px;
    background: rgba(255,255,255,0.22);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}
.faq-item:hover {
    border-color: rgba(200,128,48,0.6);
    background: rgba(255,255,255,0.32);
}
.faq-item--open {
    border-color: #c88030;
    background: rgba(255,248,224,0.55);
}

/* Question row */
.faq-q {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    letter-spacing: 0.5px;
    color: #2a1808;
    user-select: none;
    line-height: 1.3;
}
.faq-item--open .faq-q {
    color: #7a3e08;
}

.faq-arrow {
    font-size: 11px;
    color: #a07840;
    flex-shrink: 0;
    width: 12px;
    text-align: center;
    transition: color 0.15s;
}
.faq-item--open .faq-arrow {
    color: #c88030;
}

/* Answer — collapsed by default via max-height trick */
.faq-a {
    max-height: 0;
    overflow: hidden;
    padding: 0 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #3a2008;
    line-height: 1.6;
    transition: max-height 0.25s ease, padding 0.2s ease;
}
.faq-item--open .faq-a {
    max-height: 400px;
    padding: 0 14px 12px;
}

/* ============================================================
   FAQ — Telegram compact overrides
   ============================================================ */
body.tg-hud-extracted .faq-inner {
    width: min(420px, 98vw);
    max-height: 85vh;
}
body.tg-hud-extracted .faq-cat-tab {
    font-size: 11px;
    padding: 4px 10px;
}
body.tg-hud-extracted .faq-q {
    font-size: 13px;
    padding: 8px 12px;
}
body.tg-hud-extracted .faq-a {
    font-size: 12px;
}
body.tg-hud-extracted .faq-item--open .faq-a {
    padding: 0 12px 10px;
}

/* Кнопка Stars раніше мала плоский золотий градієнт (!important), який
   перебивав звичайну текстуру .pm-pack-buy-btn (buy_Button.webp) — тепер
   виглядає так само, як кнопки Крипто/PayPal, нічого спеціального не треба. */

/* ============================================================
   ЧОРНИЙ РИНОК — сцена 1024×768 зі Spine-анімацією img/black_opt/V1
   Сцена всередині .game-container під .top-panel (10001); нижню панель
   піднімає body.elevate-bottom-bar (10000). Координати .bmx-* — з камери
   BMX_VIEWPORT у js/blackMarket.js: X = (worldX + 565.5) / 1.0753,
   Y = (354.5 − worldY) / 1.0753 (фінальна поза анімації).
   ============================================================ */
.bmx-scene {
    position: absolute; top: 0; left: 0; width: 1024px; height: 768px;
    z-index: 9999; overflow: hidden;
    font-family: 'Bebas Neue', sans-serif;
}
.bmx-scene.hidden { display: none; }
.bmx-bg {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 42%, rgba(34,24,12,0.84) 0%, rgba(6,4,2,0.96) 75%);
}
.bmx-spine { position: absolute; inset: 0; }

/* HTML-шар з'являється, коли інтро-анімація дограла до фінальної пози */
.bmx-ui { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.bmx-ui.ready { opacity: 1; pointer-events: auto; }

.bmx-exit { position: absolute; left: 958px; top: 60px; width: 40px; height: 40px; cursor: pointer; z-index: 2;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); transition: transform 0.15s ease; }
.bmx-exit:hover { transform: scale(1.1); }

/* Табличка над полицями (reward_plaska 635,78 255×58) — баланс сигарет */
.bmx-balance {
    position: absolute; left: 660px; top: 85px; width: 205px; height: 44px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: 'Dela Gothic One', 'Bebas Neue', sans-serif; font-size: 18px; color: #3a2410;
}
.bmx-balance img { width: 24px; height: 24px; object-fit: contain; }

/* Папір з сіткою (gridCalendar 143,168 382×237) — деталі вибраного товару */
/* Ширина 360 (а не вся сітка 382) — праворуч на камуфляжі намальовані жетони;
   світла тінь тексту — щоб темний текст читався на плямах камуфляжу. */
.bmx-detail {
    position: absolute; left: 143px; top: 168px; width: 360px; height: 237px;
    box-sizing: border-box; padding: 16px 18px;
    display: flex; gap: 16px; align-items: flex-start;
    color: #1a1006;
    text-shadow: 0 0 3px rgba(255,246,222,0.75), 0 1px 0 rgba(255,246,222,0.6);
}
/* Слот предмета — темна утоплена комірка з латунно-оливковою рамкою (замість
   напівпрозорої паперової коробки BOX.webp, що губилась на камуфляжі) */
.bmx-slot {
    position: relative; flex-shrink: 0; box-sizing: border-box;
    border-radius: 8px; border: 2px solid #9a8a52;
    background: radial-gradient(circle at 50% 38%, rgba(255,236,190,0.22) 0%, rgba(0,0,0,0) 62%), #23241a;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.85), 0 2px 5px rgba(0,0,0,0.55);
    overflow: hidden;
}
.bmx-slot-icon { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px);
                 object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }
/* Іконки одягу — це картки Гардеробу 151×245, де малюнок лише у верхніх ~131px
   (нижче місце під назву/ціну) — заповнюємо слот верхом картки. */
.bmx-slot-icon--card { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px);
                       object-fit: cover; object-position: center top; border-radius: 5px; }
.bmx-slot-owned {
    position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; border-radius: 50%;
    background: #3fae3f; border: 1px solid #1d5a1d; color: #fff;
    font-size: 12px; line-height: 16px; text-align: center; font-family: sans-serif;
    box-shadow: 0 1px 2px rgba(0,0,0,0.6); text-shadow: none;
}
.bmx-slot--detail { width: 120px; height: 120px; border-radius: 10px; }
.bmx-slot--detail .bmx-slot-owned { width: 24px; height: 24px; line-height: 22px; font-size: 15px; right: 4px; bottom: 4px; }
.bmx-detail-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bmx-detail-name { font-size: 24px; letter-spacing: 0.5px; line-height: 1.05; }
.bmx-detail-desc { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; line-height: 1.35; color: #2a1a08;
                   max-height: 66px; overflow: hidden; }
.bmx-detail-row { display: flex; align-items: center; gap: 6px; font-size: 17px; }
.bmx-detail-row img { width: 20px; height: 20px; object-fit: contain; }
.bmx-detail-limit { font-size: 15px; color: #2a1a08; }
.bmx-detail-owned {
    align-self: flex-start; white-space: nowrap;
    padding: 3px 9px; border-radius: 5px; border: 1px solid #1d5a1d;
    background: linear-gradient(180deg, #5cbf5c 0%, #2f8a2f 100%);
    font-size: 14px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
.bmx-detail-hint { margin: auto; text-align: center; font-size: 18px; color: #2a1a08; }

/* Червона смуга нижньої лівої панелі (199,449 284×32) — статус і таймер */
.bmx-status {
    position: absolute; left: 199px; top: 449px; width: 284px; height: 32px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 16px; letter-spacing: 0.5px; color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.bmx-status .bm-timer { font-family: 'Dela Gothic One', 'Bebas Neue', sans-serif; font-size: 15px; }
.bmx-status .bm-timer--closed { color: #ffe0a0; }
/* Під смугою (quest_panel 117,441 445×143) — повідомлення "закрито" */
.bmx-closed {
    position: absolute; left: 140px; top: 492px; width: 400px; height: 70px;
    display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
    font-size: 17px; color: #7a2a18;
}

/* 5 полиць. Верх кожного рядка = верх видимої дошки (під ланцюгами), виміряно
   по рендеру фінальної пози: 150/236/322/408/494, висота дошки ~70px. */
.bmx-shelves { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.bmx-shelf {
    position: absolute; left: 598px; width: 326px; height: 70px;
    box-sizing: border-box; padding: 0 8px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; border-radius: 6px;
    transition: background 0.15s ease;
}
.bmx-shelf:hover { background: rgba(255,220,140,0.10); }
.bmx-shelf.selected { background: rgba(255,220,140,0.18); box-shadow: inset 0 0 0 2px rgba(255,210,110,0.55); }
.bmx-shelf:nth-child(1) { top: 150px; }
.bmx-shelf:nth-child(2) { top: 236px; }
.bmx-shelf:nth-child(3) { top: 322px; }
.bmx-shelf:nth-child(4) { top: 408px; }
.bmx-shelf:nth-child(5) { top: 494px; }
.bmx-shelf.sold, .bmx-shelf.locked { filter: grayscale(0.7) brightness(0.8); }
.bmx-shelf .bmx-slot { width: 56px; height: 56px; }
.bmx-sold-label {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-15deg);
    background: rgba(180,30,30,0.9); color: #fff; font-size: 9px; letter-spacing: 0.5px;
    padding: 1px 3px; border-radius: 3px; white-space: nowrap; pointer-events: none;
}
.bmx-shelf-info { flex: 1; min-width: 0; color: #fff3d6; text-shadow: 0 1px 2px rgba(0,0,0,0.85); }
.bmx-shelf-name { font-size: 17px; letter-spacing: 0.3px; line-height: 1.1;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bmx-shelf-meta { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 3px; }
.bmx-shelf-meta img { width: 16px; height: 16px; object-fit: contain; }
.bmx-shelf-limit { color: #e8cf9a; font-size: 13px; }

.bmx-buy, .bmx-owned-label {
    flex-shrink: 0; min-width: 84px; height: 34px; padding: 0 10px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    background: linear-gradient(180deg, #f0d980 0%, #c8a030 100%);
    border: 1px solid #6b4a1a; border-radius: 6px;
    font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: #3a2205;
    cursor: pointer; transition: filter 0.15s ease;
}
.bmx-buy:hover:not(:disabled) { filter: brightness(1.08); }
.bmx-buy:disabled { filter: grayscale(0.8) brightness(0.75); cursor: not-allowed; }
.bmx-buy img { width: 15px; height: 15px; }
.bmx-owned-label {
    background: linear-gradient(180deg, #5cbf5c 0%, #2f8a2f 100%); border-color: #1d5a1d;
    color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.5); cursor: default;
}

.bmx-loading, .bmx-empty {
    position: absolute; left: 600px; top: 290px; width: 322px; text-align: center;
    font-size: 18px; color: #fff3d6; text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}

/* Перемикач сторінок полиць (лише коли товарів > 5) */
.bmx-pager {
    position: absolute; left: 790px; top: 574px; height: 26px;
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; color: #fff3d6; text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}
.bmx-page-btn {
    width: 28px; height: 26px; border-radius: 5px; cursor: pointer;
    background: linear-gradient(180deg, #8a5a2a 0%, #5a3a18 100%); border: 1px solid #3a2410;
    color: #fff3d6; font-size: 12px;
}
.bmx-page-btn:disabled { opacity: 0.4; cursor: default; }

/* ============================================================
   КВЕСТИ (Quests)
   ============================================================ */
.quests-btn-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}
.quests-open-btn {
    width: 100%;
}
#quests-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ═══════════ КВЕСТИ — редизайн за img/Qwest/qwesti.psd (канва 1024×768) ═══════════
   #questsModal лишається .modal-training (position:fixed, flex-center, z-index:10500);
   .qw-inner займає рівно всю канву 1024×768 без відступів — координати нижче йдуть
   1:1 з PSD (bbox), без корекції на -50 (це не HUD-сцена, а звичайний центр-модал). */
.modal-training-inner.qw-inner {
    position: relative;
    width: 1024px;
    height: 768px;
    max-height: none;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    display: block;
}
.qw-bg-outer  { position: absolute; left: 144px; top: 85px;  width: 767px; height: 490px; pointer-events: none; }
.qw-bg-inner  { position: absolute; left: 209px; top: 151px; width: 639px; height: 401px; pointer-events: none; }
.qw-title-bg  { position: absolute; left: 112px; top: 44px;  width: 322px; height: 133px; pointer-events: none; }
.qw-title-text {
    position: absolute; left: 233px; top: 92px; width: 160px; text-align: center;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 1px;
    color: #2a1c08; text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.qw-exit-btn { position: absolute; left: 875px; top: 58px; right: auto; width: 36px; height: 36px; }

/* Ліва панель — таби за статусом (замінюють Щоденні/Тижневі) */
.qw-tab {
    position: absolute; border: none; background: transparent; padding: 0; cursor: pointer;
    opacity: .8; transition: opacity .15s, filter .15s;
}
.qw-tab-bg { display: block; width: 100%; height: 100%; }
.qw-tab span {
    position: absolute; text-align: center;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 15px; color: #2a1c08;
}
.qw-tab {
    transition: transform .15s ease, opacity .15s ease, filter .15s ease;
}
/* Активна вкладка "висувається" вліво (виїжджає з-за краю панелі) */
.qw-tab--active {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(255,210,90,0.7));
    transform: translateX(-14px);
}
.qw-tab:hover { opacity: 1; }

/* Усі три вкладки на одному рівні по X (в PSD "Всі" була зсунута — вирівняв) */
.qw-tab-active { left: 52px; top: 177px; width: 184px; height: 78px; }
.qw-tab-active span { left: 59px; top: 30px; width: 92px; }
.qw-tab-done  { left: 52px; top: 256px; width: 184px; height: 76px; }
.qw-tab-done span { left: 60px; top: 24px; width: 107px; }
.qw-tab-all   { left: 52px; top: 331px; width: 184px; height: 76px; }
.qw-tab-all span { left: 58px; top: 27px; width: 34px; }

/* Список квестів — скролиться в межах темної картки (Raster-4) */
.qw-list-viewport {
    position: absolute; left: 249px; top: 170px; width: 558px; height: 362px;
    overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
.qw-list-viewport::-webkit-scrollbar { display: none; }
.qw-list-inner { position: relative; width: 557px; }
.qw-empty { padding: 30px 0; text-align: center; color: #6b4a28; font-size: 13px; }

/* ── Рядок квесту (шаблон, top виставляється inline через JS) ── */
.qw-row { position: absolute; left: 0; width: 557px; height: 120px; }
.qw-row-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.qw-row-checkbox { position: absolute; left: 24px; top: 35px; width: 52px; height: 51px; pointer-events: none; }
.qw-row-title {
    position: absolute; left: 90px; top: 17px; width: 230px;
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; color: #2a1c08;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qw-row-desc {
    position: absolute; left: 91px; top: 40px; width: 280px;
    font-family: 'Inter', sans-serif; font-size: 12px; color: #5a4022;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qw-row-progress {
    position: absolute; left: 373px; top: 45px; width: 60px; text-align: center;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 15px; color: #2a1c08;
}
.qw-row-reward-icon { position: absolute; width: 22px; height: 22px; object-fit: contain; pointer-events: none; }
.qw-row-reward-amount {
    position: absolute; font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 13px; color: #2a1c08;
    white-space: nowrap;
}
.qw-row-reward1-icon   { left: 454px; top: 24px; }
.qw-row-reward1-amount { left: 480px; top: 26px; }
.qw-row-reward2-icon   { left: 458px; top: 53px; }
.qw-row-reward2-amount { left: 480px; top: 55px; }

.qw-row-claim-btn {
    position: absolute; left: 438px; top: 78px; width: 106px; height: 32px;
    border: none; cursor: pointer; padding: 0; background: transparent; appearance: none;
    display: flex; align-items: center; justify-content: center;
}
.qw-row-claim-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.qw-row-claim-btn span {
    position: relative; font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 13px; color: #4a2c06;
}
.qw-row-claim-btn:hover .qw-row-claim-bg { filter: brightness(1.08); }


/* Обгортка іконки — несе абсолютну позицію */
/* Лівий стовпець HUD: Чорний Ринок, Досягнення, Квести — flex-колонка, тож коли
   іконка ринку схована, кнопки під нею піднімаються; з'явилась — опускаються. */
.left-hud-col {
    position: absolute;
    left: var(--x, 10px);
    top: var(--y, 70px);
    z-index: 1100;
    width: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.left-hud-col { transition: opacity 0.25s ease; }
.left-hud-col.lhc-pending { opacity: 0; pointer-events: none; }
.lh-btn {
    position: relative;
    width: 70px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.lh-btn img { width: 70px; height: 60px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.lh-btn span:not(#quests-badge):not(.lh-badge) {
    /* position+z-index — інакше картинка з filter (своя stacking-площина) малюється поверх тексту */
    position: relative;
    z-index: 1;
    margin-top: -2px;
    padding: 1px 5px 2px;
    border-radius: 4px;
    background: rgba(0,0,0,0.55);
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 11px;
    line-height: 1.1;
    color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    white-space: nowrap;
}
.lh-btn:hover { transform: scale(1.06); filter: brightness(1.1); }
.left-hud-col #quests-badge { top: -2px; right: 0; z-index: 2; }

.bm-icon-widget {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn-Black-Market {
    background-image: url(img/ui/Black_Market.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 65px;
    height: 70px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 12px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease, filter 0.3s ease, transform 0.3s ease;
    position: relative;  /* позиція відносна всередині widget */
}

/* Таймер під іконкою */
.bm-icon-timer {
    font-family: 'Bebas Neue', monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-align: center;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 2px;
    min-width: 62px;
    text-shadow: 0 1px 3px #000;
    white-space: nowrap;
}
.bm-icon-timer--open {
    color: #4ecb71;
    background: rgba(0,0,0,0.55);
}
.bm-icon-timer--closed {
    color: #f0c060;
    background: rgba(0,0,0,0.55);
}

/* ============================================================
   👤 PLAYER PROFILE POPUP
   ============================================================ */
#player-profile-popup {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
}
#player-profile-popup.hidden { display: none; }

.ppp-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.72);
}

.ppp-modal {
    position: relative;
    z-index: 1;
    width: 345px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ppp-loc-bg {
    position: relative;
    width: 100%;
    height: 480px;
    background-size: cover;
    background-position: center;
    background-color: #1a1208;
    overflow: hidden;
    flex-shrink: 0;
}

.ppp-char-wrap {
    position: absolute;
    inset: 0;
}

.ppp-top-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
}

.ppp-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 2px solid #8a6830;
    object-fit: cover;
    flex-shrink: 0;
}

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

.ppp-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    color: #f0dca0;
    letter-spacing: 1px;
    text-shadow: 0 1px 4px #000;
    line-height: 1.1;
}

.ppp-stats-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    color: #c8a060;
}

.ppp-stat-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.ppp-medals-row {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 25;
    padding: 0 12px;
}

.ppp-medal {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px #000a);
}

/* clickable player badge in various lists */
.player-link {
    cursor: pointer;
    transition: opacity 0.15s;
}
.player-link:hover {
    opacity: 0.8;
}
/* ════════════════════════════════════════════════════════
   GameFX — Animation System v1
   A: CSS modal/button effects   B: Particle hooks
════════════════════════════════════════════════════════ */

/* ── Modal enter ── */
@keyframes fxModalEnter {
    0%   { opacity: 0; transform: scale(0.86) translateY(18px); }
    65%  { opacity: 1; transform: scale(1.025) translateY(-3px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.fx-modal-enter {
    animation: fxModalEnter 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Shake ── */
@keyframes fxShake {
    0%,100% { transform: translateX(0); }
    12%     { transform: translateX(-9px); }
    28%     { transform: translateX(8px); }
    44%     { transform: translateX(-7px); }
    60%     { transform: translateX(5px); }
    76%     { transform: translateX(-3px); }
    90%     { transform: translateX(2px); }
}
.fx-shake { animation: fxShake 0.42s ease both; }

/* ── Ripple ── */
@keyframes fxRipple {
    from { transform: scale(0); opacity: 0.45; }
    to   { transform: scale(1);  opacity: 0;    }
}
.fx-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(240, 200, 112, 0.32);
    pointer-events: none;
    transform-origin: center;
    animation: fxRipple 0.55s ease-out forwards;
}

/* ── Floating reward text ── */
@keyframes fxFloat {
    0%   { opacity: 0;   transform: translateX(-50%) translateY(0)    scale(0.6); }
    18%  { opacity: 1;   transform: translateX(-50%) translateY(-12px) scale(1.15); }
    70%  { opacity: 0.9; transform: translateX(-50%) translateY(-44px) scale(1);   }
    100% { opacity: 0;   transform: translateX(-50%) translateY(-70px) scale(0.85); }
}
.fx-float-text {
    position: fixed;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    letter-spacing: 1.5px;
    pointer-events: none;
    z-index: 100000;
    text-shadow: 0 2px 10px rgba(0,0,0,0.95), 0 0 16px currentColor;
    white-space: nowrap;
    animation: fxFloat 1.5s ease forwards;
    transform: translateX(-50%);
}

/* ── Screen flash overlay ── */
@keyframes fxScreenFlash {
    0%   { opacity: 0; }
    25%  { opacity: 1; }
    100% { opacity: 0; }
}
.fx-screen-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99998;
    animation: fxScreenFlash 0.45s ease forwards;
}

/* ── Pulse glow ── */
@keyframes fxPulse {
    0%   { box-shadow: 0 0 0 0 var(--fx-pulse-color, rgba(240,200,112,0.7)); }
    50%  { box-shadow: 0 0 0 12px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.fx-pulse { animation: fxPulse 0.7s ease 2; }

/* Кнопка "Купити" в модалці докупівлі зброї (buyItem() у script.js) */
.buy-confirm-btn { transform: translateX(-50%); transition: filter 0.15s, transform 0.15s; }
.buy-confirm-btn:hover { filter: brightness(1.2); transform: translateX(-50%) scale(1.05); }
.buy-confirm-btn:active { filter: brightness(0.95); transform: translateX(-50%) scale(0.97); }

/* ══════════════════════════════════════════════════════════════
   БОЙОВІ ДІЇ — редизайн за img/bd/war_bd.psd. Повноекранна сцена
   (як #trainingModal/#battle-pass-modal), канва 1024×768, top-панель
   50px, тому Y тут = psd_Y - 50. Статичні елементи (фони, картки,
   рамки, кнопка закриття, скролбар) — нативний розмір з PSD, без
   розтягування/стиснення. Список локацій — реальний скрол (стільки
   рядків, скільки є в БД), бігунок скролбару лише відображає позицію.
   ══════════════════════════════════════════════════════════════ */
#combatModal {
    position: absolute;
    top: var(--tp-h); left: 0;
    width: 100%; height: calc(100% - var(--tp-h));
    background: transparent;
    z-index: 9999;
    overflow: hidden;
}
#combatModal.hidden { display: none; }

.cb-inner {
    position: relative;
    width: 100%; height: 100%;
    overflow: hidden;
    background: #14100c;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
}
.cb-bg {
    position: absolute; left: 0; top: -50px;
    width: 1024px; height: 768px;
    pointer-events: none;
}
.cb-panel {
    position: absolute; left: 53px; top: 14px;
    width: 904px; height: 527px;
    pointer-events: none;
}
.cb-close-btn {
    position: absolute; left: 957px; top: 10px;
    width: 47px; height: 45px;
    cursor: pointer;
    transition: filter 0.15s;
}
.cb-close-btn:hover { filter: brightness(1.25); }

.cb-scroll-track {
    position: absolute; left: 895px; top: 33px;
    width: 30px; height: 488px;
    background-image: url('img/bd/war_bd_0001_battle_pass_0007_Scrol_bar.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.cb-scroll-thumb {
    position: absolute; left: 2px; top: 5px;
    width: 27px; height: 124px;
    background-image: url('img/bd/war_bd_0000_battle_pass_0006_scrollbar.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: grab;
}

.cb-list {
    position: absolute; left: 85px; top: 95px;
    width: 778px; height: 446px;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: none;
    display: flex; flex-direction: column; gap: 7px;
}
.cb-list::-webkit-scrollbar { display: none; width: 0; height: 0; }

.cb-row {
    position: relative;
    flex-shrink: 0;
    width: 778px; height: 128px;
    background-image: url('img/bd/war_bd_0002s_0019_podloj.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.cb-row.locked { filter: grayscale(0.85) brightness(0.55); }
.cb-row.locked .cb-leader-pill { pointer-events: none; cursor: default; }

.cb-row-icon {
    position: absolute;
    object-fit: cover;
    border-radius: 3px;
}

.cb-row-name {
    position: absolute; left: 228px; top: 24px;
    width: 380px; height: 28px;
    display: flex; align-items: center;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 18px;
    color: #2a1c0c;
    letter-spacing: 0.3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cb-reward {
    position: absolute; left: 228px; top: 56px;
    height: 26px; display: flex; align-items: center; gap: 5px;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 16px; color: #2a1c0c; letter-spacing: 0.3px;
    white-space: nowrap;
}
.cb-reward img { width: 22px; height: 22px; object-fit: contain; }
.cb-reward span + img { margin-left: 8px; }
.cb-reward-label { color: #5a3e1c; margin-right: 2px; }

.cb-pips {
    position: absolute; left: 217px; top: 89px;
    width: 300px; height: 17px;
    display: flex; gap: 3px;
}
.cb-pip {
    flex: 1; height: 17px;
    background-image: url('img/bd/traning_0000_bgProgresT.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
}
.cb-pip.filled::after {
    content: '';
    position: absolute; inset: 2px 1px;
    background-image: url('img/bd/traning_0002_ProgresT-kopiia-2.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform-origin: left center;
    animation: tnPipFill 0.4s ease-out both;
}
/* Початковий рендер (вже наявний прогрес) — без анімації, миттєво */
.cb-pip.filled.no-anim::after {
    animation: none;
    opacity: 1;
    transform: scaleX(1);
}

.cb-top-badge {
    position: absolute; left: 540px; top: 18px;
    width: 53px; height: 43px;
    pointer-events: none;
    z-index: 2;
}
.cb-avatar-wrap {
    position: absolute; left: 530px; top: 35px;
    width: 73px; height: 78px;
    z-index: 1;
}
.cb-avatar-frame {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
.cb-avatar-img {
    position: absolute; left: 5px; top: 9px;
    width: 60px; height: 63px;
    object-fit: cover; border-radius: 3px;
    cursor: pointer;
}

/* ▼ Кнопка «В бій!» на картці бойової локації — координати й розмір
   відносно картки .cb-row (778×128). Міняйте тут. */
.cb-row {
    --cb-fight-x: 33px;
    --cb-fight-y: 90px;
    --cb-fight-w: 156px;
    --cb-fight-h: 36px;
}
.cb-leader-pill {
    position: absolute; left: var(--cb-fight-x); top: var(--cb-fight-y);
    width: var(--cb-fight-w); height: var(--cb-fight-h);
    background-image: url('img/bd/war_bd_0000s_0026_button.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}
.cb-leader-pill:hover { filter: brightness(1.12); }
.cb-leader-pill:active { transform: scale(0.96); }
.cb-leader-pill.combat-btn-no-energy { filter: saturate(0.5) brightness(0.75); cursor: not-allowed; }
.cb-fight-label {
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 16px; letter-spacing: 0.5px;
    color: #3a2205;
    text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}

.cb-points {
    position: absolute; left: 617px; top: 92px;
    height: 27px; display: flex; align-items: center; gap: 6px;
}
.cb-points img { width: 26px; height: 26px; }
.cb-points span.cb-points-label {
    font-size: 15px; color: #5a3e1c; text-shadow: none; letter-spacing: 0.3px;
    margin-right: -2px;
}
.cb-points span {
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 21px; color: #ffdf8a;
    text-shadow: 0 1px 3px rgba(0,0,0,.85);
    letter-spacing: 0.5px;
}

.cb-loc-score {
    position: absolute; left: 613px; top: 22px;
    width: 156px; height: 26px;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    white-space: nowrap;
}
.cb-loc-score-label { font-size: 14px; color: #5a3e1c; letter-spacing: 0.3px; }
.cb-loc-score img { width: 20px; height: 20px; }
.cb-loc-score-val { font-size: 17px; color: #2a1c0c; letter-spacing: 0.3px; }

.cb-lock-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; color: #ffdca0; font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 15px; text-align: center; text-shadow: 0 2px 4px #000;
    letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════════════════════
   ВЗВОДИ (клани) — редизайн за img/clan/clan/clan.psd. Повноекранна
   сцена (як #trainingModal), канва 1024×768, top-панель 50px, тому
   Y тут = psd_Y - 50. Фон/панелі/рамки/кнопки — нативний розмір з
   PSD, без розтягування/стиснення. Весь текст (імена, дати, суми,
   новини) — реальний DOM-текст, картинки лишились тільки під
   декоративні/структурні елементи (як у боях/battle pass/тренуванні).
   ══════════════════════════════════════════════════════════════ */
#clans-modal .clan-modal-inner { background: transparent; border: none; box-shadow: none; }

.cv-scene {
    position: relative;
    width: 100%; height: 100%;
    overflow: hidden;
    background: #14100c;
    color: #2a1c0c;
    font-family: 'Inter', sans-serif;
}
.cv-bg   { position:absolute; left:0; top:-50px; width:1024px; height:768px; pointer-events:none; }
.cv-panel{ position:absolute; left:14px; top:34px; width:801px; height:621px; pointer-events:none; }

/* Прибрати дефолтний білий фон <button> у всіх кнопках клан-екрану та його модалок
   (усі кнопки малюються через background-image спрайтів PSD) */
.cv-scene button,
#cv-rank-modal button,
.cv-zayavka-modal button,
.cv-donatem-modal button {
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

/* ── Вкладки (5 folder-tabs) ── */
/* z-index:0 → власний стек-контекст: внутрішні z-index активної/неактивної вкладки
   лишаються локальними, а весь рядок вкладок (у DOM перед .cv-panel) лягає ЗА папір */
.cv-tabs { position:absolute; left:0; top:0; width:1024px; height:0; z-index:0; }
.cv-tab {
    position: absolute; width: 139px; height: 40px;
    background-size: 100% 100%; background-repeat: no-repeat;
    display: flex; align-items: flex-start; justify-content: center; padding: 5px 0 0;
    cursor: pointer; border: none;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 15px; letter-spacing: 0.5px; color: #6b4420;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.cv-tab--active {
    top: 6px; z-index: 2; color: #3a2205; font-size: 16px;
    background-image: url('img/clan/clan/base/clan_0005s_0031_Clan_page_Main_vkladka.webp');
}
.cv-tab--inactive {
    top: 14px; z-index: 1;
    background-image: url('img/clan/clan/base/clan_0005s_0027_Clan_page_Main_vkladka-kopiia-4.webp');
    filter: brightness(0.9);
}
.cv-tab:nth-child(1) { left: 61px; }
.cv-tab:nth-child(2) { left: 200px; }
.cv-tab:nth-child(3) { left: 339px; }
.cv-tab:nth-child(4) { left: 478px; }
.cv-tab:nth-child(5) { left: 617px; }

/* ── Контент вкладки (всередині paper-панелі) ── */
/* .cv-content лежить ПОВЕРХ вкладок (вони тепер за папером), тож сам контейнер
   має пропускати кліки крізь порожні зони до вкладок; клікає лише реальний вміст */
.cv-content { position:absolute; left:0; top:0; width:1024px; height:718px; pointer-events:none; }
.cv-content > * { pointer-events:auto; }
.cv-divider { position:absolute; display:block; }

/* ── Бічна панель "Топ активних" ── */
.cv-side {
    position:absolute; left:802px; top:55px; width:200px; height:550px;
    background-image: url('img/clan/clan/base/clan_0005s_0023_clan_bg_rank.webp');
    background-size: 100% 100%; background-repeat: no-repeat;
}
.cv-side-title {
    /* відносно .cv-side (802,55px) — 817-802=15, 70-55=15 */
    position:absolute; left:15px; top:15px; width:157px;
    font-family:'KatanaBold','Bebas Neue',sans-serif; font-size:14px;
    color:#3a2205; letter-spacing:0.3px;
}
/* Закріплений "featured" #1 (avatar_frame/no_image_friend/nickname з PSD) —
   решта рейтингу гортається списком нижче, зі своїм скролбаром. */
.cv-side-featured-frame {
    /* Зсунуто на +15px (ширина .cv-side-rank 14px + gap 7px, мінус той самий
       gap уже врахований раніше) відносно початкового значення — у звичайних
       рядках перед аватаркою є номер рангу (14px+7px gap), у featured #1 його
       немає, тож без цього зсуву аватарка #1 їхала лівіше за колонку 2+. */
    position:absolute; left:28px; top:52px; width:44px; height:47px; pointer-events:none;
}
.cv-side-featured-avatar {
    position:absolute; left:31px; top:56px; width:38px; height:39px;
    object-fit:cover; border-radius:3px;
}
.cv-side-featured-name {
    position:absolute; left:72px; top:69px; width:120px;
    font-size:11px; font-weight:700; color:#2a1c0c;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cv-side-scroll-track {
    position:absolute; left:162px; top:52px; width:19px; height:489px;
    background-image:url('img/clan/clan/base/clan_0005s_0016_Friend_modal_0013_Scrol_bar_bg.webp');
    background-size:100% 100%; background-repeat:no-repeat;
}
.cv-side-scroll-thumb {
    position:absolute; left:0; top:5px; width:19px; height:78px;
    background-image:url('img/clan/clan/base/clan_0005s_0015_Friend_modal_0012_scrollbar.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    cursor:grab;
}
.cv-side-list {
    /* Список рангів 2+ — під закріпленим #1 */
    position:absolute; left:10px; top:105px; width:145px; height:440px;
    overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
    display:flex; flex-direction:column; gap:8px;
}
.cv-side-list::-webkit-scrollbar { display:none; }
.cv-side-row { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.cv-side-rank { width:14px; font-size:10px; font-weight:700; color:#6b4420; text-align:center; flex-shrink:0; }
.cv-side-avatar {
    width:34px; height:35px; object-fit:cover; border-radius:3px; flex-shrink:0;
    border:2px solid #4a3218; background:#ddd;
}
.cv-side-name {
    font-size:11px; font-weight:700; color:#2a1c0c;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── Нижня панель клану ── */
.cv-bottom-info-bg {
    position:absolute; left:56px; top:540px; width:700px; height:79px;
    background-image:url('img/clan/clan/base/clan_0005s_0025_clan_bg_rank.webp');
    background-size:100% 100%; background-repeat:no-repeat; opacity:0.9;
    display:none;   /* потрібна лише на вкладці "Рейтинг" — див. нижче */
}
.cv-scene[data-tab="rating"] .cv-bottom-info-bg { display:block; }
.cv-bottombar {
    position:absolute; left:23px; top:606px; width:980px; height:94px;
    background-image:url('img/clan/clan/base/clan_0005s_0024_Clan_panelDown.webp');
    background-size:100% 100%; background-repeat:no-repeat;
}
.cv-emblem-wrap { position:absolute; left:39px; top:621px; width:52px; height:60px; display:flex; align-items:center; justify-content:center; }
.cv-lvl-badge {
    position:absolute; left:54px; top:670px; width:20px; height:20px;
    background-image:url('img/clan/clan/base/clan_0005s_0007_p_lev_clan.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    display:flex; align-items:center; justify-content:center;
    font-family:'Bebas Neue',sans-serif; font-size:11px; color:#000;
}
.cv-clanname {
    position:absolute; left:118px; top:637px; width:230px;
    font-family:'KatanaBold','Bebas Neue',sans-serif; font-size:17px;
    color:#f0d8a8; letter-spacing:0.5px; text-shadow:0 1px 2px rgba(0,0,0,.6);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cv-progress-wrap { position:absolute; left:110px; top:668px; width:380px; height:17px; }
.cv-progress-bg {
    position:absolute; inset:0;
    background-image:url('img/clan/clan/base/clan_0005s_0010_clab_progress_bg.webp');
    background-size:100% 100%; background-repeat:no-repeat;
}
.cv-progress-fill {
    position:absolute; left:1px; top:1px; height:15px; width:0%;
    background-image:url('img/clan/clan/base/clan_0005s_0009_clab_progress_fill.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    transition:width .4s;
}
.cv-progress-label {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:'Bebas Neue',sans-serif; font-size:11px; color:#2a1c0c;
}
.cv-money-icon { position:absolute; left:646px; top:642px; width:26px; height:24px; }
.cv-treasury {
    position:absolute; left:675px; top:644px; width:90px;
    font-family:'Bebas Neue',sans-serif; font-size:17px; color:#f0d090;
}
.cv-donate-btn {
    position:absolute; left:512px; top:639px; width:116px; height:27px;
    background-image:url('img/clan/clan/base/clan_0005s_0021_63-kopiia.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    border:none; cursor:pointer;
    font-family:'Bebas Neue',sans-serif; font-size:12px; color:#3a2205;
}
.cv-donate-btn:hover { filter:brightness(1.1); }
/* left:15,top:15 замість оригінальних 974,18 з PSD — там сидить спільна
   кнопка закриття екрану (.tm-exit-btn, z-index:30) для всіх повноекранних
   сцен гри, і накладання двох іконок в тому самому куті виглядало б криво. */
.cv-exit-clan-btn {
    position:absolute; left:15px; top:15px; width:34px; height:34px;
    cursor:pointer; border:none; background:transparent; padding:0;
}
.cv-soon-plaque { position:absolute; left:840px; top:611px; width:116px; height:107px; pointer-events:none; }
.cv-soon-label { position:absolute; left:863px; top:632px; width:70px; height:39px; pointer-events:none; }
.cv-divider-v { position:absolute; left:801px; top:612px; width:5px; height:86px; pointer-events:none; }

/* Спільний вертикальний скролбар вмісту вкладки (news/members/chat/rating) —
   той самий актив, що й у бічній панелі, лише "копія" з PSD (base group),
   позиція фіксована в базовій оболонці, а що саме він гортає — вирішує
   активна вкладка через cvSetupContentScroll(). */
.cv-main-scroll-track {
    position:absolute; left:756px; top:66px; width:19px; height:495px;
    background-image:url('img/clan/clan/base/clan_0005s_0014_Friend_modal_0013_Scrol_bar_bg-kopiia.webp');
    background-size:100% 100%; background-repeat:no-repeat;
}
.cv-main-scroll-thumb {
    position:absolute; left:0; top:5px; width:19px; height:86px;
    background-image:url('img/clan/clan/base/clan_0005s_0013_Friend_modal_0012_scrollbar-kopiia.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    cursor:grab;
}

/* ── НОВИНИ ── */
.cv-news-title {
    position:absolute; left:241px; top:107px; width:307px; text-align:center;
    font-family:'KatanaBold','Bebas Neue',sans-serif; font-size:22px; color:#2a1c0c; letter-spacing:1px;
}
.cv-notice-row {
    position:absolute; left:68px; top:174px; width:640px;
    display:flex; align-items:center; gap:8px; font-size:13px; color:#3a2205;
}
.cv-notice-label { font-weight:700; flex-shrink:0; }
.cv-notice-text { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-notice-edit-btn {
    width:22px; height:22px; border:none; background:transparent; cursor:pointer; padding:0; flex-shrink:0;
    background-image:url('img/clan/clan/news_clan/clan_0004s_0002_pencil_botton.webp');
    background-size:100% 100%; background-repeat:no-repeat;
}
.cv-notice-edit-wrap { position:absolute; left:68px; top:200px; width:640px; display:none; }
.cv-notice-textarea {
    width:100%; min-height:40px; font-size:13px; padding:6px; box-sizing:border-box;
    background:rgba(255,255,255,.5); border:1px solid rgba(90,50,10,.4); border-radius:4px; color:#2a1a08;
    font-family:inherit; resize:vertical;
}
.cv-news-feed {
    /* треті "Лінія 1 копія 3" divider закінчується на sceneY≈252 (298-50=248,+висота),
       дата й перший рядок стрічки в PSD йдуть одразу під ним (07.09.2026 на y=303-50=253) */
    position:absolute; left:67px; top:252px; width:684px; height:403px;
    overflow-y:auto; padding-right:6px;
    scrollbar-width:none;
}
.cv-news-feed::-webkit-scrollbar { display:none; }
.cv-news-date { text-align:center; font-family:'KatanaBold','Bebas Neue',sans-serif; font-size:16px; color:#3a2205; margin:10px 0 8px; }
.cv-news-line { display:flex; align-items:center; gap:10px; padding:6px 4px; font-size:13px; color:#2a1c0c; }
.cv-news-icon { width:24px; height:24px; object-fit:contain; flex-shrink:0; }

/* ── УЧАСНИКИ ── */
.cv-mem-actions { position:absolute; left:0; top:0; width:1024px; height:0; }
.cv-mem-app-btn {
    position:absolute; left:68px; top:94px; width:116px; height:27px; border:none; cursor:pointer;
    background-image:url('img/clan/clan/members_clan/clan_0003s_0024_63.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    font-family:'Bebas Neue',sans-serif; font-size:12px; color:#3a2205;
}
.cv-mem-app-badge {
    position:absolute; left:170px; top:83px; width:27px; height:27px;
    background-image:url('img/clan/clan/members_clan/clan_0003s_0020_Elips-1.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    display:flex; align-items:center; justify-content:center;
    font-family:'Bebas Neue',sans-serif; font-size:12px; color:#fff;
}
.cv-mem-recruit-btn {
    position:absolute; left:614px; top:94px; width:116px; height:27px; border:none; cursor:pointer;
    background-image:url('img/clan/clan/members_clan/clan_0003s_0023_Close_members_nabor.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    font-family:'Bebas Neue',sans-serif; font-size:11px; color:#3a2205;
}
/* 4 підкладки заголовку колонок (rang_clan_ram_name_main×4 з PSD) */
.cv-mem-head-plate {
    position:absolute; top:128px; width:114px; height:27px;
    background-image:url('img/clan/clan/members_clan/clan_0003s_0040_rang_clan_ram_name_main.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    display:flex; align-items:center; justify-content:center;
    font-family:'Bebas Neue',sans-serif; font-size:12px; color:#3a2205; text-transform:uppercase; letter-spacing:.5px;
}
.cv-mem-head-plate.h-name  { left:98px; }
.cv-mem-head-plate.h-rank  { left:232px; }
.cv-mem-head-plate.h-title { left:382px; }
.cv-mem-head-plate.h-usefulness { left:538px; }

/* Скрол лише по рядках — шапка/дії лишаються на місці */
.cv-mem-rows-scroll {
    position:absolute; left:0; top:154px; width:1024px; height:428px;
    overflow-y:auto; overflow-x:hidden;
    scrollbar-width:none;
}
.cv-mem-rows-scroll::-webkit-scrollbar { display:none; }
.cv-mem-row {
    position:absolute; left:54px; width:694px; height:53px;
    background-image:url('img/clan/clan/members_clan/clan_0003s_0033_rank_clan.webp');
    background-size:100% 100%; background-repeat:no-repeat;
}
.cv-mem-avatar-frame { position:absolute; left:14px; top:8px; width:35px; height:37px; pointer-events:none; }
.cv-mem-avatar { position:absolute; left:16px; top:11px; width:30px; height:31px; object-fit:cover; border-radius:2px; }
.cv-mem-name {
    position:absolute; left:67px; top:18px; width:110px; cursor:pointer;
    font-size:13px; font-weight:700; color:#1a1208; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cv-mem-rank { position:absolute; left:224px; top:16px; width:60px; text-align:center; font-size:15px; font-weight:700; color:#1a1208; }
.cv-mem-role-text {
    position:absolute; left:328px; top:16px; width:114px; text-align:center;
    font-size:13px; font-weight:700; color:#1a1208;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cv-mem-role-pill {
    position:absolute; left:331px; top:14px; width:108px; height:31px; cursor:pointer; border:none;
    background-image:url('img/clan/clan/members_clan/clan_0003s_0019_Priamokutnyk-1.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    font-family:'Bebas Neue',sans-serif; font-size:11px; font-weight:700; color:#2a1c0c;
    padding:0 4px; box-sizing:border-box;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cv-mem-role-pill:hover { filter:brightness(1.1); }
/* Колонки рядка вирівняні по центру плашок шапки (рядок зсунутий на 54px):
   звання — центр 439px (h-title 382+57), користь — центр 595px (h-usefulness 538+57).
   pointer-events:none — щоб підпис ніколи не перекривав кнопки праворуч. */
.cv-mem-usefulness { position:absolute; left:491px; top:19px; width:100px; text-align:center; font-size:12px; font-style:italic; color:#000; pointer-events:none; }
.cv-mem-kick-btn {
    position:absolute; z-index:1; left:648px; top:15px; width:21px; height:21px; border:none; cursor:pointer; padding:0;
    background:url('img/clan/clan/members_clan/clan_0003s_0003_kick_player.webp') center / contain no-repeat;
}
.cv-mem-transfer-btn {
    position:absolute; z-index:1; left:595px; top:14px; width:26px; height:26px; border:none; cursor:pointer; padding:0;
    background:url('img/clan/clan/members_clan/clan_0003s_0001_Button_transfer_of_control.webp') center / contain no-repeat;
}
.cv-mem-leave-btn {
    position:absolute; z-index:1; left:646px; top:13px; width:25px; height:25px; border:none; cursor:pointer; padding:0;
    background:url('img/clan/clan/base/clan_0005s_0011_Exit_clan.webp') center / contain no-repeat;
}
.cv-mem-leave-btn:hover { filter:brightness(1.12); }
.cv-mem-count { position:absolute; left:54px; top:587px; font-size:12px; color:#000; }

/* ── Модалка зміни рангу (change_of_rank_modal з PSD) ──
   9 пунктів з PSD показані як шкала для орієнтиру, але реально клікабельні
   лише ті, що відповідають фактичним 3 ролям бекенду (soldier/sergeant/officer) —
   тільки візуал, без нових функціональних рангів. */
#cv-rank-modal { position:absolute; inset:0; z-index:20; display:none; }
#cv-rank-modal.open { display:block; }
.cv-rank-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.cv-rank-modal-panel {
    position:absolute; left:498px; top:127px; width:126px; height:315px;
    background-image:url('img/clan/clan/members_clan/change_of_rank_modal/clan_0003s_0001s_0019_clan_bg_rank.webp');
    background-size:100% 100%; background-repeat:no-repeat;
}
.cv-rank-modal-close {
    position:absolute; left:601px; top:117px; width:27px; height:26px; border:none; cursor:pointer; padding:0;
    background:url('img/clan/clan/members_clan/change_of_rank_modal/clan_0003s_0001s_0018_exit_modal.webp') center / contain no-repeat;
}
.cv-rank-modal-item {
    position:absolute; left:505px; width:108px; height:31px; border:none; cursor:pointer;
    background-image:url('img/clan/clan/members_clan/change_of_rank_modal/clan_0003s_0001s_0017_Priamokutnyk-1-kopiia-2.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    font-family:'Bebas Neue',sans-serif; font-size:11px; font-weight:700; color:#2a1c0c;
    padding:0 4px; box-sizing:border-box;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cv-rank-modal-item.is-current { outline:2px solid #d99a2a; outline-offset:-2px; }
.cv-rank-modal-item[disabled] { opacity:.4; cursor:not-allowed; }
.cv-rank-modal-item:not([disabled]):hover { filter:brightness(1.1); }

/* ── УПРАВЛІННЯ ── */
/* повноекранна сітка не повинна перехоплювати кліки над вкладками (вони за папером) */
.cv-mgmt-grid { position:absolute; left:0; top:0; width:1024px; height:718px; pointer-events:none; }
.cv-bld-slot {
    position:absolute; width:194px; height:188px; pointer-events:auto;
    background-image:url('img/clan/clan/manager/clan_0002s_0017_clan_bg_y.webp');
    background-size:100% 100%; background-repeat:no-repeat;
}
.cv-bld-slot:nth-child(1) { left:72px;  top:100px; }
.cv-bld-slot:nth-child(2) { left:302px; top:100px; }
.cv-bld-slot:nth-child(3) { left:531px; top:97px;  }
.cv-bld-slot:nth-child(4) { left:72px;  top:330px; }
.cv-bld-slot:nth-child(5) { left:302px; top:330px; }
.cv-bld-label {
    position:absolute; left:40px; top:5px; width:120px; text-align:center;
    font-family:'Bebas Neue',sans-serif; font-size:13px; color:#2a1c08; font-weight:700;
}
/* Великий рівень будівлі — готові цифри-спрайти з PSD, правий верхній кут.
   Фіксована ширина + gap замість margin:0 25px — інакше при двозначному рівні
   (10/10, MAX) другий символ виштовхувало far за межі картки й він "губився". */
.cv-bld-level {
    position:absolute; left:143px; top:-16px; width:70px; height:50px;
    display:flex; align-items:flex-end; justify-content:center; gap:2px;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
.cv-bld-level-d {
    height:50px;
    width:auto;
    object-fit:contain;
}
/* "+7.5%" бейдж бафа (Прямокутник-3 з PSD) */
.cv-bld-bonus-badge {
    position:absolute; left:62px; top:27px; width:71px; height:23px;
    background-image:url('img/clan/clan/manager/clan_0002s_0009_Priamokutnyk-3.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    display:flex; align-items:center; justify-content:center;
    font-family:'Bebas Neue',sans-serif; font-size:12px; font-weight:700; color:#2a1c08;
}
/* Іконка — під рамкою; рамка (A_Zarub) з фігурним внутрішнім краєм лягає зверху;
   решта (рівень, бейдж бафа, вартість, кнопка) — над рамкою. */
.cv-bld-icon  { position:absolute; left:40px; top:27px; width:115px; height:113px; object-fit:cover; border-radius:6px; z-index:1; }
.cv-bld-frame { position:absolute; left:25px; top:22px; width:145px; height:145px; z-index:2; pointer-events:none; }
.cv-bld-slot > .cv-bld-label,
.cv-bld-slot > .cv-bld-level,
.cv-bld-slot > .cv-bld-bonus-badge,
.cv-bld-slot > .cv-bld-cost,
.cv-bld-slot > .cv-bld-upgrade-btn { z-index:3; }
.cv-bld-icon.is-locked { filter:grayscale(1) brightness(.5); }
.cv-bld-cost {
    position:absolute; left:30px; top:139px; width:120px; display:flex; align-items:center; justify-content:center; gap:4px;
    font-size:13px; font-weight:700; font-family:'Bebas Neue',sans-serif; color:#000;
}
.cv-bld-cost img { 
    width:16px; 
    height:15px; 
}
.cv-bld-upgrade-btn {
    position:absolute; left:46px; top:169px; width:113px; height:36px; border:none; cursor:pointer;
    background-image:url('img/clan/clan/manager/clan_0002s_0007_btnOpenBag.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    display:flex; align-items:center; justify-content:center; gap:5px;
    font-family:'Bebas Neue',sans-serif; font-size:13px; font-weight:700; color:#000;
}
.cv-bld-upgrade-icon { width:15px; height:18px; object-fit:contain; }
.cv-bld-upgrade-btn:disabled { opacity:.45; cursor:not-allowed; }

/* ── ЧАТ ── */
.cv-chat-messages {
    position:absolute; left:67px; top:75px; width:684px; height:470px;
    overflow-y:auto; font-size:13px; color:#2a1c0c;
    scrollbar-width:none;
}
.cv-chat-messages::-webkit-scrollbar { display:none; }
/* Читабельний шрифт замість декоративного Font2 (його примусово ставить .clan-modal-inner *),
   кожне повідомлення — на світлій напівпрозорій плашці поверх паперу. */
.clan-modal-inner .cv-chat-messages, .clan-modal-inner .cv-chat-messages *,
.clan-modal-inner .cv-chat-input { font-family:'Inter', Arial, sans-serif !important; }
.cv-chat-msg {
    margin:0 0 6px; padding:6px 10px 7px;
    background:rgba(255,248,230,0.82);
    border-left:3px solid #8a4a12; border-radius:4px;
    box-shadow:0 1px 2px rgba(0,0,0,0.15);
    font-size:15px; line-height:1.35; color:#1a1208;
    word-wrap:break-word; overflow-wrap:anywhere;
}
.cv-chat-name { color:#7a1e08; font-weight:700; }
.cv-chat-time { margin-left:6px; font-size:11px; color:#8a6a40; }
.cv-chat-text { display:block; margin-top:2px; white-space:pre-wrap; }
.cv-chat-empty { text-align:center; color:#7a5530; margin-top:20px; }
.cv-chat-input-wrap {
    position:absolute; left:46px; top:555px; width:541px; height:106px;
    background-image:url('img/clan/clan/chat/clan_0001s_0001_input_field_text.webp');
    background-size:100% 100%; background-repeat:no-repeat;
}
/* Поле вводу — прозоре, лежить прямо на бежевій плашці input_field_text (плашка — верхні
   ~44px картинки, x 18..522 всередині .cv-chat-input-wrap 46,555). #clans-body textarea
   нижче за специфічністю, тому скидаємо його темний фон/рамку явно. */
#clans-body .cv-chat-input {
    position:absolute; left:72px; top:560px; width:452px; height:34px;
    box-sizing:border-box; padding:7px 4px;
    background:transparent; border:none; border-radius:0; outline:none; resize:none; overflow:hidden;
    font-family:'Inter',sans-serif; font-size:15px; line-height:20px; color:#2a1c0c;
}
#clans-body .cv-chat-input::placeholder { color:#6a5030; }
.cv-chat-counter { position:absolute; left:530px; top:571px; font-size:11px; color:#4a3418; pointer-events:none; }
.cv-chat-send-btn {
    position:absolute; left:580px; top:563px; width:159px; height:37px; border:none; cursor:pointer;
    background-image:url('img/clan/clan/chat/clan_0001s_0004_Clan_btn_send.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    font-family:'Bebas Neue',sans-serif; font-size:14px; color:#f0e8d0;
}

/* ── РЕЙТИНГ ── */
.cv-rating-title { position:absolute; left:317px; top:84px; width:192px; height:70px; pointer-events:none; }
/* Подвійна лінія-роздільник над і під заголовком "ТОП 100" (з clan.psd, групи
   "Лінія 1" і "Лінія 1 копія 4") — раніше не було, тому заголовок висів у порожнечі. */
.cv-rating-divider { position:absolute; left:67px; width:682px; background:#000; pointer-events:none; }
.cv-rating-divider-top-thick    { top:69px;  height:5px; }
.cv-rating-divider-top-thin     { top:76px;  height:2px; }
.cv-rating-divider-bottom-thin  { top:131px; height:2px; }
.cv-rating-divider-bottom-thick { top:135px; height:5px; }
/* Суб-таби рейтингу (Урон/Донати/Повага) — кнопки на папері, під заголовком "ТОП 100" */
.cv-rtabs { position:absolute; left:0; top:146px; width:1024px; height:33px; }
.cv-rtab {
    position:absolute; top:0; width:81px; height:33px; border:none; cursor:pointer;
    background-size:100% 100%; background-repeat:no-repeat;
    display:flex; align-items:center; justify-content:center; gap:4px;
    font-family:'Bebas Neue',sans-serif; font-size:11px; color:#6b4420; opacity:.65;
}
.cv-rtab.active { opacity:1; color:#3a2205; }
.cv-rtab:nth-child(1) { left:253px; background-image:url('img/clan/clan/rating/clan_0000s_0047_1ActivColectPage.webp'); }
.cv-rtab:nth-child(2) { left:361px; background-image:url('img/clan/clan/rating/clan_0000s_0046_1ActivColectPage-kopiia.webp'); }
.cv-rtab:nth-child(3) { left:469px; background-image:url('img/clan/clan/rating/clan_0000s_0045_1ActivColectPage-kopiia-2.webp'); }

/* Рейтинг — ЄДИНИЙ список, що гортається: топ-3 "п'єдестал" (Шар13/16/17 —
   готова стрічка з рангом+короною, "6/7/8" в PSD = приклад герба клану →
   підставляємо реальний) + компактні рядки 4-100 нижче. Закріплена картка
   "ваша бригада" — окремий елемент нижче списку, завжди видима. */
.cv-rating-scroll {
    position:absolute; left:0; top:186px; width:1024px; height:363px;
    overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
    padding-top:4px;
}
.cv-rating-scroll::-webkit-scrollbar { display:none; }

.cv-rrow-1, .cv-rrow-2, .cv-rrow-3 {
    position:relative; display:block;
    background-size:100% 100%; background-repeat:no-repeat;
}
.cv-rrow-1 { width:682px; height:134px; margin:0 0 -2px 65px;  z-index:3;
    background-image:url('img/clan/clan/rating/clan_0000s_0031_Shar-13.webp'); }
.cv-rrow-2 { width:660px; height:92px;  margin:0 0 -14px 72px; z-index:2;
    background-image:url('img/clan/clan/rating/clan_0000s_0032_Shar-16.webp'); }
.cv-rrow-3 { width:644px; height:98px;  margin:0 0 8px 83px;   z-index:1;
    background-image:url('img/clan/clan/rating/clan_0000s_0029_Shar-17.webp'); }

.cv-podium-name { position:absolute; font-size:15px; font-weight:700; color:#1a1208; width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-podium-tag { font-size:12px; font-weight:400; opacity:.75; }
.cv-podium-value-icon { position:absolute; width:29px; height:29px; object-fit:contain; pointer-events:none; }
.cv-podium-value { position:absolute; font-size:15px; font-weight:700; color:#2a1c0c; }
.cv-podium-lvlbadge {
    position:absolute; width:17px; height:17px; background-size:100% 100%; background-repeat:no-repeat;
    background-image:url('img/clan/clan/rating/clan_0000s_0001_p_lev_clan.webp');
    display:flex; align-items:center; justify-content:center;
    font-size:9px; font-weight:700; color:#000;
}
.cv-rrow-1 .cv-podium-name  { left:239px; top:74px; }
.cv-rrow-1 .cv-podium-value-icon { left:448px; top:68px; }
.cv-rrow-1 .cv-podium-value { left:486px; top:75px; }
.cv-rrow-1 .cv-podium-lvlbadge { left:201px; top:92px; }
.cv-rrow-2 .cv-podium-name  { left:232px; top:34px; }
.cv-rrow-2 .cv-podium-value-icon { left:441px; top:30px; }
.cv-rrow-2 .cv-podium-value { left:479px; top:38px; }
.cv-rrow-2 .cv-podium-lvlbadge { left:192px; top:53px; }
.cv-rrow-3 .cv-podium-name  { left:221px; top:46px; }
.cv-rrow-3 .cv-podium-value-icon { left:430px; top:41px; }
.cv-rrow-3 .cv-podium-value { left:468px; top:47px; }
.cv-rrow-3 .cv-podium-lvlbadge { left:181px; top:62px; }

/* Ранги 4+ — компактний рядок (rank_clan-копія-3) */
.cv-rrow {
    position:relative; width:669px; height:48px; margin:0 0 7px 68px;
    background-image:url('img/clan/clan/rating/clan_0000s_0037_rank_clan-kopiia-3.webp');
    background-size:100% 100%; background-repeat:no-repeat;
}
.cv-rrank { position:absolute; left:19px; top:14px; width:24px; text-align:center; font-family:'Bebas Neue',sans-serif; font-size:15px; color:#5a3a15; }
.cv-rinfo { position:absolute; left:144px; top:0; width:250px; height:48px; display:flex; align-items:center; gap:8px; }
.cv-rname { font-size:13px; font-weight:700; color:#1a1208; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-rtag  { font-size:11px; color:#6b4420; }
.cv-rmembers { font-size:11px; color:#5a3a15; }
.cv-rvalue-icon { position:absolute; left:474px; top:14px; width:25px; height:24px; object-fit:contain; }
.cv-rvalue { position:absolute; left:509px; top:19px; font-size:14px; font-weight:700; color:#2a1c0c; }
.cv-rlvlbadge {
    position:absolute; left:150px; top:25px; width:17px; height:17px;
    background-image:url('img/clan/clan/rating/clan_0000s_0001_p_lev_clan.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    display:flex; align-items:center; justify-content:center;
    font-size:9px; font-weight:700; color:#000;
}

/* "Ваша бригада" — завжди закріплена нижче списку (плашка clan_bg_rank з base). */
.cv-rmine-pin {
    position:absolute; left:56px; top:553px; width:700px; height:50px;
    background-image:url('img/clan/clan/base/clan_0005s_0025_clan_bg_rank.webp');
    background-size:100% 100%; background-repeat:no-repeat;
    z-index:10;   /* поверх .cv-bottom-info-bg спільної оболонки */
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.cv-rmine-pin .cv-rrank { left:14px; top:16px; }
.cv-rmine-pin .cv-rinfo { left:159px; top:1px; }
.cv-rmine-pin .cv-rvalue-icon { left:490px; top:13px; }
.cv-rmine-pin .cv-rvalue { left:525px; top:18px; }
.cv-rmine-pin .cv-rlvlbadge { left:165px; top:26px; }

.cv-rating-empty, .cv-rating-loader { text-align:center; padding:30px; color:#5a3a15; }

/* ============================================================
   ГЛОБАЛЬНИЙ TOAST (#game-message / showGameMessage) — єдина
   плашка для всіх повідомлень/помилок по всій грі, під стиль
   решти модалок: паперова текстура + бронзова рамка.
   ============================================================ */
.gm-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    z-index: 999999;
    pointer-events: none;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 13px 26px;
    /* Темна деревʼяно-шкіряна плашка (як нижня панель клану), а не паперова —
       щоб яскраві кольори тексту (передаються з JS: #0f0/#f55/orange/тощо
       у ~90 місцях по всій грі) лишились контрастними й читабельними */
    background: linear-gradient(rgba(30,18,8,.94), rgba(20,12,5,.94));
    border: 2px solid #8a6830;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,215,140,.15);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: .5px;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
}


/* ===== Комплекти одягу з босів: іконка icon_set.webp + попап "Можуть випасти ці речі" ===== */
.bc-rw-gear, .pf-rw-gear { cursor: pointer; }
.bc-rw-gear:hover .bc-rw-val, .pf-rw-gear:hover span { text-decoration: underline; }
.bc-rw-gear:hover img, .pf-rw-gear:hover img { filter: brightness(1.2); }

.gd-overlay {
    position: absolute; inset: 0;
    z-index: 10050;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.55);
}
.gd-overlay.hidden { display: none; }
.gd-note {
    position: relative;
    width: 400px; max-height: 600px;
    display: flex; flex-direction: column;
    padding: 30px 20px 18px;
    box-sizing: border-box;
    background: url('img/ui/paper_bg.webp') center / cover no-repeat, #e6d3a6;
    border: 3px solid #8a6830;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.7);
    transform: rotate(-1.5deg);
    color: #2a1c08;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
}
.gd-pin {
    position: absolute; left: 50%; top: -12px;
    width: 26px; height: 26px; margin-left: -13px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff8a7a 0%, #d22a1c 45%, #7a0e06 100%);
    box-shadow: 0 3px 5px rgba(0,0,0,0.5);
}
.gd-close { position: absolute; right: -14px; top: -14px; width: 34px; height: 33px; cursor: pointer; }
.gd-close:hover { filter: brightness(1.15); }
.gd-title {
    text-align: center;
    font-size: 22px; letter-spacing: 1px; line-height: 1;
    color: #3a2208;
    margin-bottom: 12px;
}
.gd-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
.gd-group {
    padding: 10px 10px 8px;
    margin-bottom: 10px;
    background: rgba(90,60,20,0.12);
    border: 1px solid rgba(90,60,20,0.35);
    border-radius: 4px;
}
.gd-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.gd-group-name { font-size: 17px; letter-spacing: 0.5px; color: #3a2208; }
.gd-chance { font-size: 13px; color: #7a3e08; white-space: nowrap; }
.gd-items { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.gd-item {
    position: relative;
    width: 70px; height: 66px;
    border: 2px solid #6a4a20;
    border-radius: 3px;
    overflow: hidden;
    background: #3a2a14;
}
/* shop_icon — картка 151x245, картинка в ній на (6,9) 140x132 → масштаб 0.5 */
.gd-item-img {
    width: 100%; height: 100%;
    background-size: 75.5px 122.5px;
    background-position: -3px -4.5px;
    background-repeat: no-repeat;
}
.gd-item-check { position: absolute; right: -2px; top: -3px; width: 30px; height: 33px; }
.gd-bonus { margin-top: 8px; font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.35; color: #3a2a10; }
.gd-bonus b { color: #5a1a08; }
.gd-status { margin-top: 5px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: #6a4a20; }
.gd-status--done { color: #2f6a12; }
.gd-hint { font-family: 'Inter', sans-serif; font-size: 11px; font-style: italic; text-align: center; color: #5a4420; }

.vp-gear-thumb {
    display: inline-block; flex-shrink: 0;
    width: 36px; height: 34px;
    border: 1px solid #8a6830; border-radius: 3px;
    background-size: 38.8px 63px;
    background-position: -1.5px -2.3px;
    background-repeat: no-repeat;
}

/* ▼ Кнопки локацій на правій панелі (Тренування, Battle Pass, Взводи, Бойові дії, Лут) —
   спільний зсув по вертикалі. Від'ємне значення = вище. Міняйте тут. */
:root { --loc-btns-shift: -170px; }
.right-panel > #openTrainingModal,
.right-panel > #open-battle-pass-btn,
.right-panel > #open-clans-btn,
.right-panel > #combat-btn-wrapper,
.right-panel > #tm-header-loot-btn {
    translate: 0 var(--loc-btns-shift);
}

/* ===== Дерево талантів у сцені "Прогрес" — читабельність на світлому папері ===== */
#progress-modal .tlm-title { color: #2a1c08; }
#progress-modal .tlm-balance { color: #4a3418; }
#progress-modal .tlm-balance strong { color: #b07a00; text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
#progress-modal .tlm-talent {
    background: rgba(32, 22, 10, 0.9);
    border-color: rgba(0,0,0,0.35);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
#progress-modal .tlm-talent:hover { background: rgba(44, 31, 15, 0.92); }
#progress-modal .tlm-t-name { font-size: 15px; color: #fff4dc; }
#progress-modal .tlm-t-desc { font-size: 12px; color: #d9c7a0; }
#progress-modal .tlm-t-progress-label { font-size: 11px; color: #eadcbc; }
#progress-modal .tlm-t-cost { font-size: 13px; }
#progress-modal .tlm-talent.locked { opacity: 0.7; }

/* Кнопка "Скинути таланти" — у шапці поруч з балансом (внизу її перекривала нижня панель) */
.tlm-header-right { display: flex; align-items: center; gap: 16px; }
#progress-modal .tlm-reset-btn {
    background: #5a1c0c;
    border: 1px solid #2a0c04;
    color: #ffe6c8;
    font-size: 13px;
    padding: 6px 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.35);
}
#progress-modal .tlm-reset-btn:hover { background: #7a2a12; }
#progress-modal .tlm-reset-refund { color: #f0c8a0; font-size: 11px; }

/* ===== Вибір взводу (гравець не у взводі) — сцена зі спрайтів екрана клану ===== */
.cvl-title {
    position:absolute; left:68px; top:88px; width:420px;
    font-family:'KatanaBold','Bebas Neue',sans-serif; font-size:24px; letter-spacing:1px;
    color:#2a1c08; text-transform:uppercase;
}
.cvl-top-btn {
    position:absolute; width:116px; height:27px; border:none; cursor:pointer; padding:0;
    background:url('img/clan/clan/members_clan/clan_0003s_0024_63.webp') center / 100% 100% no-repeat;
    font-family:'Bebas Neue',sans-serif; font-size:13px; letter-spacing:.5px; color:#3a2205;
}
.cvl-top-btn:hover, .cvl-apply-btn:hover { filter:brightness(1.1); }
.cvl-rating-btn { left:614px; top:94px; }
.cv-mem-head-plate.cvl-head.h-emb   { left:68px; }
.cv-mem-head-plate.cvl-head.h-cname { left:250px; }
.cv-mem-head-plate.cvl-head.h-date  { left:470px; }
.cvl-rows-scroll {
    position:absolute; left:0; top:164px; width:760px; height:418px;
    overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
}
.cvl-rows-scroll::-webkit-scrollbar { display:none; }
.cvl-empty { position:absolute; left:54px; top:20px; width:694px; text-align:center; font-family:'KatanaBold','Bebas Neue',sans-serif; font-size:16px; color:#4a3418; }
.cvl-emblem { position:absolute; left:24px; top:7px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.cvl-name {
    position:absolute; left:130px; top:16px; width:300px;
    font-family:'KatanaBold','Bebas Neue',sans-serif; font-size:16px; color:#1a1208;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cvl-tag { color:#8a3e08; font-size:14px; }
.cvl-date { position:absolute; left:416px; top:18px; width:114px; text-align:center; font-size:12px; font-style:italic; color:#3a2a14; }
.cvl-apply-btn {
    position:absolute; left:560px; top:13px; width:116px; height:27px; border:none; cursor:pointer; padding:0;
    background:url('img/clan/clan/members_clan/clan_0003s_0024_63.webp') center / 100% 100% no-repeat;
    font-family:'Bebas Neue',sans-serif; font-size:13px; letter-spacing:.5px; color:#3a2205;
}
.cvl-side-emblem { position:absolute; left:50px; top:70px; width:100px; height:116px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.cvl-side-text { position:absolute; left:18px; top:204px; width:164px; text-align:center; font-family:'KatanaBold','Bebas Neue',sans-serif; font-size:14px; line-height:1.25; color:#3a2205; }
.cvl-side-cost { position:absolute; left:0; top:278px; width:200px; display:flex; align-items:center; justify-content:center; gap:6px; font-family:'KatanaBold','Bebas Neue',sans-serif; font-size:18px; color:#3a2205; }
.cvl-side-cost img { width:20px; height:20px; }
.cvl-create-btn { left:42px; top:316px; }

/* Рівень і учасники в рядку списку взводів */
.cvl-emblem { overflow: visible; }
.cvl-lvl {
    position:absolute; bottom:-4px; width:19px; height:19px;
    background:url('img/clan/clan/rating/clan_0000s_0001_p_lev_clan.webp') center / 100% 100% no-repeat;
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:700; color:#000; font-family:'Inter',sans-serif;
}
.cvl-name { top:9px; }
.cvl-sub { position:absolute; left:130px; top:29px; font-size:11px; color:#6a4a20; font-family:'KatanaBold','Bebas Neue',sans-serif; }
.cvl-date { font-style:normal; font-size:13px; font-weight:700; }
.cvl-back-btn { position:absolute; left:68px; top:94px; }

/* Створення взводу */
.cv-mem-head-plate.cvc-head { width:150px; }
.cvc-input-bar {
    position:absolute; height:42px;
    background:url('img/clan/clan/chat/input_bar.webp') center / 100% 100% no-repeat;
}
#clans-body .cvc-input-bar input {
    position:absolute; left:14px; top:0; width:calc(100% - 28px) !important; height:42px;
    box-sizing:border-box; padding:0 !important; margin:0;
    /* !important — перебиває загальне темне #clans-body input:not(...) (вища специфічність) */
    background:transparent !important; border:none !important; border-radius:0 !important; outline:none;
    font-family:'KatanaBold','Bebas Neue',sans-serif !important; font-size:18px !important; letter-spacing:.5px; color:#2a1c08 !important;
    text-align:center;
}
#clans-body .cvc-input-bar input::placeholder { color:#6a5030; }
.cvc-emblem-grid {
    position:absolute; left:68px; top:282px; width:660px;
    display:grid; grid-template-columns:repeat(5, 118px); gap:12px 14px;
}
.cvc-emblem-slot {
    height:86px; display:flex; align-items:center; justify-content:center; cursor:pointer;
    background:url('img/clan/clan/members_clan/clan_0003s_0033_rank_clan.webp') center / 100% 100% no-repeat;
    transition:transform .12s, filter .12s;
}
.cvc-emblem-slot:hover { transform:translateY(-2px); filter:brightness(1.06); }
.cvc-emblem-slot.selected { filter:drop-shadow(0 0 6px rgba(255,190,40,.95)) brightness(1.08); }
.cvc-emblem-slot .emblem-preset-opt { width:52px; height:60px; padding:0; border:none; background:none; box-shadow:none; }
.cvc-emblem-slot.selected .emblem-preset-opt { border:none; box-shadow:none; }
.cvc-hue {
    position:absolute; left:230px; top:484px; width:500px; height:18px;
    -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer;
}
.cvc-hue::-webkit-slider-runnable-track {
    height:10px; border-radius:5px; border:1px solid #3a2410;
    background:linear-gradient(90deg,#c00,#cc0,#0c0,#0cc,#00c,#c0c,#c00);
}
.cvc-hue::-moz-range-track { height:10px; border-radius:5px; border:1px solid #3a2410; background:linear-gradient(90deg,#c00,#cc0,#0c0,#0cc,#00c,#c0c,#c00); }
.cvc-hue::-webkit-slider-thumb {
    -webkit-appearance:none; width:22px; height:22px; margin-top:-7px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#ffe08a,#e8a030 55%,#8a4e10); border:2px solid #3a2205;
}
.cvc-hue::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#e8a030; border:2px solid #3a2205; }

/* Рейтинг поза взводом: без закріпленої картки "ваш взвод" — список до низу панелі */
.cvl-scene[data-tab="rating"] .cv-rating-scroll { height:405px; }

/* ===== Картки талантів — спрайти гри: паперова картка (traning_0004_Shar-2),
   жовта кнопка (traning_0002_Shar-6), смуга прогресу тренувань (bgProgresT/ProgresT) ===== */
#progress-modal .tlm-talent {
    background: url('img/traning/traning_0004_Shar-2.png') center / 100% 100% no-repeat;
    border: none;
    border-radius: 0;
    border-top: 3px solid var(--branch-color);
    box-shadow: none;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35));
    padding: 10px 12px 11px;
}
#progress-modal .tlm-talent:hover { background: url('img/traning/traning_0004_Shar-2.png') center / 100% 100% no-repeat; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45)) brightness(1.04); }
#progress-modal .tlm-talent.maxed { border-top-color: #2e8b3a; }
#progress-modal .tlm-talent.locked { opacity: 1; filter: grayscale(0.7) drop-shadow(0 3px 5px rgba(0,0,0,0.35)); }
#progress-modal .tlm-t-name {
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 15px; color: #2a1c08;
}
#progress-modal .tlm-t-desc { font-size: 12px; color: #4a3418; }
#progress-modal .tlm-t-progress-track {
    height: 13px;
    background: url('img/bd/traning_0000_bgProgresT.webp') center / 100% 100% no-repeat;
    border: none; border-radius: 0; overflow: visible;
    position: relative;
}
#progress-modal .tlm-t-progress-fill {
    position: absolute; left: 3px; top: 3px; height: 7px;
    max-width: calc(100% - 6px);
    background: url('img/bd/traning_0002_ProgresT-kopiia-2.webp') left center / 100% 100% no-repeat;
    box-shadow: none;
}
#progress-modal .tlm-t-progress-label { color: #3a2a14; font-family: 'Inter', sans-serif; }
#progress-modal .tlm-t-cost {
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 16px; color: #7a3e08;
}
#progress-modal .tlm-invest-btn {
    width: 92px; height: 28px; padding: 0 0 2px;
    background: url('img/traning/traning_0002_Shar-6.png') center / 100% 100% no-repeat;
    border: none; border-radius: 0;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 13px; letter-spacing: .5px; color: #2a1c04;
    box-shadow: none; text-shadow: none;
}
#progress-modal .tlm-invest-btn:hover { filter: brightness(1.1); }
#progress-modal .tlm-invest-btn.disabled { filter: grayscale(0.9) brightness(0.9); cursor: not-allowed; }
#progress-modal .tlm-dot { background: rgba(60,40,15,0.2); border-color: rgba(60,40,15,0.45); }
#progress-modal .tlm-connector { color: #4a3418; }

.tlm-branch-title { display:flex; align-items:center; justify-content:center; gap:6px; }
.tlm-branch-icon { width:26px; height:26px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); }

/* ===== Пошук гравця — спрайти гри: паперова картка, плашка поля, жовті кнопки, рядок як у взводі ===== */
#searchModal .sch-box {
    width: 500px; max-width: 92%; min-height: 200px;
    padding: 30px 34px 28px;
    background: url('img/traning/traning_0004_Shar-2.png') center / 100% 100% no-repeat;
    border: none; border-radius: 0; box-shadow: none;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.7));
    overflow: visible;
}
#searchModal .sch-close-btn { top: -10px; right: -10px; width: 36px; height: 35px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
#searchModal .sch-title { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 24px; color: #2a1c08; text-transform: uppercase; }
#searchModal .sch-search-row { align-items: center; gap: 12px; }
#searchModal .sch-input-bar {
    flex: 1; min-width: 0; height: 42px; position: relative;
    background: url('img/clan/clan/chat/input_bar.webp') center / 100% 100% no-repeat;
}
#searchModal .sch-input {
    position: absolute; left: 16px; top: 0; width: calc(100% - 32px); height: 42px;
    box-sizing: border-box; padding: 0;
    background: transparent; border: none; border-radius: 0;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 17px; color: #2a1c08;
}
#searchModal .sch-input:focus { background: transparent; }
#searchModal .sch-input::placeholder { color: #6a5030; }
#searchModal .sch-search-btn,
#searchModal .sch-add-btn {
    width: 120px; height: 34px; padding: 0 0 3px; flex-shrink: 0;
    background: url('img/traning/traning_0002_Shar-6.png') center / 100% 100% no-repeat;
    border: none; border-radius: 0;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: .5px; color: #2a1c04;
    transition: filter .15s, transform .1s;
}
#searchModal .sch-search-btn:hover, #searchModal .sch-add-btn:hover { filter: brightness(1.1); }
#searchModal .sch-search-btn:active, #searchModal .sch-add-btn:active { transform: scale(0.96); }
#searchModal .sch-add-btn { width: 128px; font-size: 13px; }
#searchModal .sch-loading, #searchModal .sch-empty { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 16px; color: #4a3418; }
#searchModal .sch-card {
    height: 64px; padding: 0 14px 0 16px;
    background: url('img/clan/clan/members_clan/clan_0003s_0033_rank_clan.webp') center / 100% 100% no-repeat;
    border: none; border-radius: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.sch-card-avatar-wrap { position: relative; width: 48px; height: 51px; flex-shrink: 0; }
#searchModal .sch-card-avatar-wrap .sch-card-avatar {
    position: absolute; left: 3px; top: 3px; width: 42px; height: 44px;
    border: none; border-radius: 2px;
}
.sch-card-avatar-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#searchModal .sch-card-name { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 17px; color: #1a1208; }
#searchModal .sch-card-stats { color: #4a3418; font-weight: 700; }

/* Позначка бета-версії: правий нижній кут .game-container, поверх усіх сцен і модалок */
#beta-badge {
    position: absolute; right: 6px; bottom: 3px;
    z-index: 2147483647;
    pointer-events: none;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
    font-size: 11px; letter-spacing: 1px;
    color: rgba(255, 235, 190, 0.85);
    text-shadow: 0 1px 2px #000, 0 0 3px #000;
    user-select: none;
}

/* Кнопка "Надіслати" в рядку модалки надсилання луту (замість аватара відправника) */
.gs-send-btn {
    position: absolute; left: 350px; top: 26px; width: 118px; height: 32px; padding: 0 0 3px;
    background: url('img/traning/traning_0002_Shar-6.png') center / 100% 100% no-repeat;
    border: none; border-radius: 0; cursor: pointer;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 14px; letter-spacing: .5px; color: #2a1c04;
    transition: filter .15s, transform .1s;
}
.gs-send-btn:hover { filter: brightness(1.1); }
.gs-send-btn:active { transform: scale(0.96); }
#gift-send-modal .gr-row-name { width: 220px; }
#gift-send-modal .gr-row-qty { left: 116px; top: 44px; }

/* ===== Перегляд друга — паперова картка гри (traning_0004_Shar-2), фото локації в рамці,
   аватар у рамці з кланів, жовті кнопки гри, червоний хрестик ===== */
#friend-view-panel {
    top: calc(50% - 22px); /* трохи вище — щоб низ картки не ховався за нижньою панеллю */
    width: 360px; height: 500px;
    border-radius: 0; overflow: visible;
    background: url('img/traning/traning_0004_Shar-2.png') center / 100% 100% no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.75));
    color: #2a1c08;
}
#friend-view-panel .fvp-top-overlay {
    top: 16px; left: 22px; right: 22px;
    background: none; padding: 0; gap: 10px;
}
.fvp-avatar-wrap { position: relative; width: 48px; height: 51px; flex-shrink: 0; }
#friend-view-panel .fvp-avatar { position: absolute; left: 3px; top: 3px; width: 42px; height: 44px; border: none; border-radius: 2px; }
.fvp-avatar-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#friend-view-panel .fvp-name {
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 20px; font-weight: normal;
    color: #2a1c08; text-shadow: none;
    max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#friend-view-panel .fvp-stats-row {
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 15px;
    color: #5a3a10; text-shadow: none; gap: 5px;
}
#friend-view-panel .fvp-stats-row span { margin-right: 8px; }
#friend-view-panel #friend-loc-bg {
    position: absolute; left: 22px; top: 80px;
    width: 316px; height: 350px;
    border: 3px solid #4a3418; box-sizing: border-box;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.6), 0 2px 5px rgba(0,0,0,0.35);
}
#friend-view-panel .fvp-char-wrap { left: -17px; top: -150px; }
#friend-view-panel .fvp-bottom-overlay {
    top: auto; bottom: 18px; left: 22px; right: 22px;
    background: none; padding: 0; gap: 12px; justify-content: center;
}
#friend-view-panel .fvp-btn {
    flex: 0 0 148px; height: 34px; padding: 0 0 3px;
    background: url('img/traning/traning_0002_Shar-6.png') center / 100% 100% no-repeat;
    border-radius: 0; backdrop-filter: none;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 15px; font-weight: normal;
    color: #2a1c04; letter-spacing: .3px;
    transition: filter .15s, transform .1s;
}
#friend-view-panel .fvp-btn:hover { filter: brightness(1.1); }
#friend-view-panel .fvp-btn:active { transform: scale(0.96); }
#friend-view-panel .fvp-btn:disabled { filter: grayscale(0.9) brightness(0.9); cursor: default; }
#friend-view-panel .fvp-close {
    top: -12px; right: -12px; width: 36px; height: 35px;
    background: none; border-radius: 0; line-height: normal;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
#friend-view-panel .fvp-close:hover { background: none; transform: scale(1.08); }

/* ===== Картка гравця (одна для друзів і всіх гравців) — паперова картка гри ===== */
#player-profile-popup .ppp-card {
    position: relative; z-index: 1;
    width: 380px; box-sizing: border-box;
    padding: 18px 22px 20px;
    display: flex; flex-direction: column; gap: 8px;
    background: url('img/traning/traning_0004_Shar-2.png') center / 100% 100% no-repeat;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.75));
    color: #2a1c08;
}
#player-profile-popup .ppp-close-btn {
    position: absolute; top: -12px; right: -12px; width: 36px; height: 35px;
    cursor: pointer; z-index: 5; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
#player-profile-popup .ppp-close-btn:hover { transform: scale(1.08); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.ppp-head { display: flex; align-items: center; gap: 10px; }
.ppp-avatar-wrap { position: relative; width: 48px; height: 51px; flex-shrink: 0; }
#player-profile-popup .ppp-avatar {
    position: absolute; left: 3px; top: 3px; width: 42px; height: 44px;
    border: none; border-radius: 2px;
}
.ppp-avatar-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#player-profile-popup .ppp-name {
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 20px;
    color: #2a1c08; text-shadow: none; letter-spacing: .3px;
    max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#player-profile-popup .ppp-stats-row {
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 15px; color: #5a3a10; gap: 5px;
}
#player-profile-popup .ppp-stats-row span { margin-right: 8px; }
#player-profile-popup .ppp-photo {
    position: relative; width: 336px; height: 300px; flex-shrink: 0;
    background-size: cover; background-position: center; background-color: #1a1208;
    border: 3px solid #4a3418; box-sizing: border-box; overflow: hidden;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.6), 0 2px 5px rgba(0,0,0,0.35);
}
#player-profile-popup .ppp-char-wrap {
    position: absolute; inset: auto; left: -7px; top: -175px;
    width: 345px; height: 550px; pointer-events: none;
}
.ppp-section {
    padding: 5px 8px 6px;
    background: rgba(90,60,20,0.12);
    border: 1px solid rgba(90,60,20,0.3);
    border-radius: 3px;
}
.ppp-sec-title {
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 14px; color: #3a2205;
    margin-bottom: 4px; display: flex; justify-content: space-between;
}
.ppp-sec-count { color: #7a3e08; }
#player-profile-popup .ppp-medals-row {
    position: static; display: flex; flex-wrap: wrap; justify-content: flex-start;
    gap: 4px; padding: 0; min-height: 34px;
}
#player-profile-popup .ppp-medal { width: 34px; height: 34px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.ppp-ach-row { display: flex; flex-wrap: wrap; gap: 4px; min-height: 34px; }
.ppp-ach { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.ppp-empty { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; color: #6a4a20; line-height: 34px; }
.ppp-actions { display: flex; gap: 12px; justify-content: center; margin-top: 2px; }
.ppp-btn {
    width: 150px; height: 34px; padding: 0 0 3px;
    background: url('img/traning/traning_0002_Shar-6.png') center / 100% 100% no-repeat;
    border: none; border-radius: 0; cursor: pointer;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 15px; color: #2a1c04;
    transition: filter .15s, transform .1s;
}
.ppp-btn:hover { filter: brightness(1.1); }
.ppp-btn:active { transform: scale(0.96); }
.ppp-btn:disabled { filter: grayscale(0.9) brightness(0.9); cursor: default; }

/* Вікно "Надіслати" відкривається з картки друга (#player-profile-popup, z-index 12000) — має бути над нею */
#gift-send-modal { z-index: 12500 !important; }

/* ═══ Модалка "Змінити нікнейм" — спрайти з екрана «Створити взвод»
   (папір podlj_bg, плашка-заголовок поля, input_bar, жовта кнопка 63). ═══ */
.modal-training-inner.rn-inner {
    position: relative; width: 460px; height: 356px; max-height: none;
    background: transparent; border: none; border-radius: 0; box-shadow: none;
    padding: 0; overflow: visible; display: block;
}
.rn-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 8px 24px rgba(0,0,0,.6)); }
.rn-title {
    position: absolute; left: 44px; top: 46px; width: 330px;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 1px;
    color: #2a1c08; text-transform: uppercase;
}
.rn-close { position: absolute; right: 30px; top: 36px; width: 33px; height: 32px; cursor: pointer; }
.rn-close:hover { filter: brightness(1.1); }
.rn-head {
    position: absolute; left: 44px; top: 110px; width: 150px; height: 27px;
    background: url('img/clan/clan/members_clan/clan_0003s_0040_rang_clan_ram_name_main.webp') center / 100% 100% no-repeat;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bebas Neue', sans-serif; font-size: 12px; color: #3a2205; text-transform: uppercase; letter-spacing: .5px;
}
.rn-input-bar {
    position: absolute; left: 44px; top: 142px; width: 372px; height: 42px;
    background: url('img/clan/clan/chat/input_bar.webp') center / 100% 100% no-repeat;
}
.rn-input-bar input {
    position: absolute; left: 14px; top: 0; width: calc(100% - 28px); height: 42px;
    box-sizing: border-box; padding: 0; margin: 0;
    background: transparent; border: none; outline: none;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: .5px;
    color: #2a1c08; text-align: center;
}
.rn-input-bar input::placeholder { color: #6a5030; }
.rn-error {
    position: absolute; left: 44px; top: 192px; width: 372px; min-height: 18px;
    text-align: center; font-size: 13px; color: #a8261a;
}
.rn-save {
    position: absolute; left: 150px; top: 226px; width: 160px; height: 38px;
    border: none; padding: 0; cursor: pointer;
    background: url('img/clan/clan/members_clan/clan_0003s_0024_63.webp') center / 100% 100% no-repeat;
    font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 1px; color: #3a2205;
}
.rn-save:hover { filter: brightness(1.1); }

/* Преміум-магазин: текстовий напис категорії (жетони/креслення — без карбованої плашки) */
.pmv2-category-text {
    position: absolute; top: 1%; left: 50%; transform: translateX(-50%);
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px;
    color: #3a2205; text-transform: uppercase; pointer-events: none; white-space: nowrap;
}
.pmv2-cat-tab img[src*="tokens.webp"], .pmv2-cat-tab img[src*="blueprints.webp"] { width: 46px; height: 46px; object-fit: contain; }

/* ===== Посилка другу за жетони (#parcel-modal) — поверх каркасу rewards.psd (.gr-*) ===== */
.pc-status {
    position: absolute; left: 290px; top: 161px; width: 460px; height: 24px; /* смуга внутрішнього паперу (.gr-bg-inner top:180) над списком (top:215) — раніше висіло на темному краю зовнішньої рамки */
    display: flex; align-items: center; gap: 6px;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 16px; color: #2a1c08;
}
.pc-status img { width: 22px; height: 22px; object-fit: contain; }
.pc-today { margin-left: auto; font-size: 13px; color: #5a3a14; }
.pc-row-icon { width: 60px; height: 50px; left: 14px; top: 21px; }
#parcel-modal .gr-row-name { width: 220px; }
.pc-row-amount { left: 116px; top: 46px; width: 220px; font-size: 15px; color: #3a5a10; }
.pc-cost {
    position: absolute; left: 350px; top: 60px; width: 118px;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 15px; color: #2a1c08;
}
.pc-cost img { width: 18px; height: 18px; object-fit: contain; }
.pc-send-btn[disabled] { filter: grayscale(1) brightness(.85); cursor: not-allowed; opacity: .7; }

/* Гардероб: купівля речі з боса за креслення */
.cs-card-bp { display: flex; align-items: center; justify-content: center; gap: 4px; }
.cs-card-bp img { width: 16px; height: 16px; object-fit: contain; }
.cs-bp-balance {
    position: absolute; right: 44px; top: 24px; z-index: 3;
    display: flex; align-items: center; gap: 5px;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 16px; color: #f0e0b8;
    text-shadow: 0 1px 2px #000;
}
.cs-bp-balance img { width: 22px; height: 22px; object-fit: contain; }

/* Посилка/надсилання луту відкриваються З профілю друга (#player-profile-popup, z-index:12000) —
   мають бути над ним, а не за ним (.modal-training дає лише 10500) */
#parcel-modal, #gift-send-modal { z-index: 12500; }

/* ===== Колекції (сцена "Прогрес") — спрайти квестів/нагород, клас .clc-* ===== */
.clc-card {
    position: relative; flex-shrink: 0;
    width: 650px; height: 156px;
    background: url('img/Qwest/qwest_0028_podl_zavd.webp') center / 100% 100% no-repeat;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.25));
}
.clc-card.clc-complete { background-image: url('img/Qwest/qwest_0033_Podl_complite_mission.webp'); }
.clc-title {
    position: absolute; left: 24px; top: 12px;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .5px; color: #2a1c08;
}
.clc-items { position: absolute; left: 20px; top: 42px; display: flex; gap: 20px; }
.clc-slot { width: 74px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.clc-frame {
    position: relative; width: 70px; height: 70px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    background: #5e4e38; border: 2px solid #3e2f1c; border-radius: 5px;
    box-shadow: inset 0 0 10px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.35);
}
.clc-item-img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.clc-empty .clc-item-img { opacity: .3; filter: grayscale(1) brightness(.6); }
.clc-check { position: absolute; right: -8px; top: -8px; width: 24px; height: 24px; pointer-events: none; }
.clc-qty {
    position: absolute; right: 3px; bottom: 1px;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 15px; color: #ffdf8a;
    text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
.clc-name {
    width: 80px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 13px; color: #4a3418;
}
/* Права частина — за вертикальною рискою спрайта (~77% ширини) */
.clc-side {
    position: absolute; left: 502px; top: 0; width: 136px; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.clc-reward { display: flex; align-items: center; gap: 6px; }
.clc-reward img { width: 24px; height: 28px; object-fit: contain; }
.clc-reward span {
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 24px; color: #ffdf8a;
    text-shadow: 0 1px 3px rgba(0,0,0,.85);
}
.clc-count { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 16px; color: #4a3418; }
.clc-hint { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 12px; color: #7a5a30; text-align: center; }
.clc-btn {
    width: 116px; height: 35px; margin: 0; border: none; padding: 0 0 2px; cursor: pointer;
    background: url('img/Qwest/qwest_0032_button.webp') center / 100% 100% no-repeat;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 16px; color: #3a2205;
}
.clc-btn:hover { filter: brightness(1.1); }
.clc-btn:disabled { filter: grayscale(.8); cursor: default; }
#progress-modal .pgc-wrap { gap: 16px; padding-left: 4px; padding-right: 30px; }

/* ===== Призов (реферальна програма) ===== */
.achievement-tab-buttons .achievement-tab-btn { width: 102px; font-size: 14px; }
.ach-ref-invite { display: block; width: 180px; margin: 0 auto 12px; }
.sch-invite-btn {
    display: block; margin: 16px auto 0; width: 220px; height: 40px; border: none; cursor: pointer; padding: 0 0 3px;
    background: url('img/traning/traning_0002_Shar-6.png') center / 100% 100% no-repeat;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 17px; color: #2a1c04;
}
.sch-invite-btn:hover { filter: brightness(1.08); }
#referral-modal { z-index: 12500; }
.rf-body {
    padding: 4px 8px 16px; box-sizing: border-box;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; color: #2a1c08;
}
.rf-link-bar {
    position: relative; height: 40px;
    background: url('img/clan/clan/chat/input_bar.webp') center / 100% 100% no-repeat;
}
.rf-link-input {
    position: absolute; left: 14px; top: 0; width: calc(100% - 28px); height: 40px; box-sizing: border-box;
    padding: 0; border: none; outline: none; background: transparent;
    font-family: 'Inter', sans-serif; font-size: 13px; color: #2a1c08; text-align: center;
}
.rf-btn-row { display: flex; justify-content: center; gap: 14px; margin: 8px 0 10px; }
.rf-btn {
    width: 130px; height: 36px; border: none; padding: 0 0 2px; cursor: pointer;
    background: url('img/Qwest/qwest_0032_button.webp') center / 100% 100% no-repeat;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 16px; color: #3a2205;
}
.rf-btn:hover { filter: brightness(1.1); }
.rf-note { text-align: center; font-size: 14px; color: #5a3e1c; margin: 8px 0; }
.rf-stats {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px;
    padding: 8px 12px; margin-bottom: 8px; font-size: 15px; color: #4a3418;
    background: rgba(90,62,28,.12); border: 1px solid rgba(90,62,28,.35); border-radius: 4px;
}
.rf-stats b { color: #2a1c08; font-size: 17px; }
.rf-earned { display: flex; align-items: center; gap: 6px; }
.rf-rw { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; }
.rf-rw img { width: 18px; height: 18px; object-fit: contain; }
.rf-h {
    margin: 10px 0 6px; font-size: 17px; letter-spacing: .5px; color: #6b3c12;
    border-bottom: 1px solid rgba(90,62,28,.35); padding-bottom: 2px;
}
.rf-ranks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rf-rank { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rf-rank img { width: 118px; height: 72px; object-fit: contain; filter: grayscale(1) brightness(.75) opacity(.6); }
.rf-rank.rf-rank-done img { filter: drop-shadow(0 0 6px rgba(255,200,60,.8)); }
.rf-rank span { font-size: 13px; color: #5a3e1c; }
.rf-rank.rf-rank-done span { color: #2a6a10; }
.rf-step { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; border-bottom: 1px dashed rgba(90,62,28,.25); }
.rf-step-lvl {
    flex: 0 0 58px; text-align: center; padding: 2px 0; font-size: 13px; color: #3a2205;
    background: url('img/traning/traning_0002_Shar-6.png') center / 100% 100% no-repeat;
}
.rf-step-txt { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; }
.rf-friend {
    display: grid; grid-template-columns: 40px 1fr 60px 120px; align-items: center; gap: 8px;
    padding: 5px 6px; margin-bottom: 4px; background: rgba(90,62,28,.1); border-radius: 4px;
}
.rf-f-ava { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; border: 2px solid #5a3e1c; cursor: pointer; }
.rf-f-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-f-lvl { font-size: 14px; color: #5a3e1c; }
.rf-f-pips { display: flex; align-items: center; gap: 3px; }
.rf-pip {
    width: 16px; height: 9px;
    background: url('img/traning/traning_0000_bgProgresT.png') center / 100% 100% no-repeat;
}
.rf-pip.on { background-image: url('img/traning/traning_0002_ProgresT-kopiia-2.png'); }
.rf-f-cnt { margin-left: 4px; font-size: 13px; color: #5a3e1c; }

/* Тренування — мальований скролбар як у бойових діях (.cb-scroll-track), нативний сховано */
.tn-rows { scrollbar-width: none; }
.tn-rows::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tn-scroll-track {
    position: absolute; left: 880px; top: 107px;
    width: 30px; height: 399px; z-index: 2;
    background: url('img/bd/war_bd_0001_battle_pass_0007_Scrol_bar.webp') center / 100% 100% no-repeat;
}
.tn-scroll-thumb {
    position: absolute; left: 2px; top: 5px;
    width: 27px; height: 124px; cursor: grab;
    background: url('img/bd/war_bd_0000_battle_pass_0006_scrollbar.webp') center / 100% 100% no-repeat;
}

/* Призов — скролбар зі взводів праворуч від списку (.gr-list-viewport: left 276, top 215, 488×307) */
.rf-scroll-track {
    position: absolute; left: 768px; top: 215px;
    width: 19px; height: 307px; z-index: 2;
    background: url('img/clan/clan/base/clan_0005s_0014_Friend_modal_0013_Scrol_bar_bg-kopiia.webp') center / 100% 100% no-repeat;
}
.rf-gear { display: flex; justify-content: center; gap: 18px; }
.rf-gear-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 110px; }
/* Іконка — картка магазину 151x245; показуємо лише червону плашку (6,9 → 140x132), масштаб 0.7 */
.rf-gear-frame {
    position: relative; width: 98px; height: 92px; box-sizing: content-box;
    border: 2px solid #3e2f1c; border-radius: 5px; overflow: visible;
    box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.rf-gear-frame img.rf-gear-icon {
    position: absolute; left: -4px; top: -6px; width: 106px; height: 172px;
    clip-path: inset(6px 4px 73px 4px);
}
.rf-gear-slot:not(.done) img.rf-gear-icon { filter: grayscale(1) brightness(.6); opacity: .6; }
.rf-gear-check { position: absolute; right: -8px; top: -8px; width: 24px; height: 24px; }
.rf-gear-need { font-size: 13px; color: #5a3e1c; }
.rf-gear-slot.done .rf-gear-need { color: #2a6a10; }
.rf-set-bonus { text-align: center; margin-top: 6px; font-size: 15px; color: #6b3c12; }

/* ===== Курс молодого бійця (#refdaily-modal) — каркас rewards.psd, скролбар зі взводів ===== */
#refdaily-modal { z-index: 12500; }
.rd-title { font-size: 18px; }
.rd-body { padding: 4px 6px 14px; box-sizing: border-box; font-family: 'KatanaBold', 'Bebas Neue', sans-serif; color: #2a1c08; }
.rd-head { text-align: center; font-size: 20px; color: #6b3c12; }
.rd-sub { text-align: center; font-size: 13px; color: #5a3e1c; margin: 2px 0 6px; }
.rd-claim { display: block; margin: 0 auto 10px; width: 170px; }
.rf-btn-wide { width: 240px; }
.rd-done { text-align: center; font-size: 14px; color: #2a6a10; margin-bottom: 10px; }
.rd-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 6px; }
/* Картка дня = рамка картки магазину одягу 151x245 (віконце 6,9 → 140x132) */
.rd-cell {
    position: relative; aspect-ratio: 151 / 245; box-sizing: border-box;
    background: url('img/char/shop_ui/card_P1.webp') center / 100% 100% no-repeat;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
    transition: transform .12s;
}
.rd-cell.rd-big { background-image: url('img/char/shop_ui/card_B2.webp'); }
.rd-window {
    position: absolute; left: 4%; top: 3.7%; width: 92.7%; height: 53.9%;
    border-radius: 7px; background: radial-gradient(circle at 50% 40%, #7a3424 0%, #57221a 70%);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.rd-rewards { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rd-rw {
    display: inline-flex; align-items: center; gap: 3px;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 13px; color: #ffdf8a;
    text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
.rd-rw img { width: 18px; height: 18px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
/* одна нагорода — велика іконка, число під нею */
.rd-single .rd-window .rd-rw { flex-direction: column; gap: 1px; font-size: 15px; }
.rd-single .rd-window .rd-rw img { width: 34px; height: 34px; }
.rd-num {
    position: absolute; left: 0; right: 0; top: 60%; text-align: center;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 14px; letter-spacing: .3px; color: #3a2205;
}
.rd-big .rd-num { color: #5a2a00; }
.rd-recruiter {
    position: absolute; left: 2px; right: 2px; top: 74%;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 2px;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 10px; color: #2a6a10; line-height: 1.1;
}
.rd-recruiter .rd-rw { font-size: 11px; color: #2a6a10; text-shadow: none; }
.rd-recruiter .rd-rw img { width: 13px; height: 13px; }
.rd-today { transform: translateY(-3px); filter: drop-shadow(0 0 7px rgba(255,200,50,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.rd-claimed { filter: brightness(.8) saturate(.7) drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.rd-cell.rd-missed { filter: grayscale(1) brightness(.75); }
.rd-missed-x {
    position: absolute; left: 0; right: 0; top: 18%; text-align: center; pointer-events: none;
    font-size: 44px; line-height: 1; color: rgba(190,40,25,.9); text-shadow: 0 1px 2px #000;
}
.rd-mark {
    position: absolute; right: -5px; top: -5px; width: 22px; height: 22px; z-index: 2;
    background: url('img/collections/turya_ref/bgCheckboxColect.webp') center / 100% 100% no-repeat;
    display: flex; align-items: center; justify-content: center;
}
.rd-mark img { width: 18px; height: 14px; }
.rf-daily-sub { text-align: left; margin: 0 0 6px; }

/* ===== Модалка атаки боса — редизайн правої панелі у стилі гри ===== */
#prefight-modal .pf-podl { display: none; } /* сіра підкладка — замінена рядками нагород */
#prefight-modal .pf-info-title,
#prefight-modal .pf-reward-title { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; color: #f3e6c4; text-shadow: 0 2px 3px rgba(0,0,0,.85); }
#prefight-modal .pf-info-title { font-size: 28px; letter-spacing: 2px; }
#prefight-modal .pf-target-name { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 18px; color: #ffdf8a; text-shadow: 0 1px 2px #000; }
#prefight-modal .pf-reward-title {
    top: 166px; height: 34px; line-height: 34px; font-size: 20px; color: #3a2205; text-shadow: none;
    background: url('img/clan/Clan_page_Main_vkladka.webp') center / 100% 100% no-repeat;
}
#prefight-modal .pf-rewards { left: 580px; top: 210px; width: 322px; height: 194px; }
.pf-rw2 {
    position: absolute; left: 0; width: 322px; height: var(--pf-rw-h, 44px);
    display: flex; align-items: center; gap: 6px;
}
.pf-rw2-slot {
    flex: 0 0 var(--pf-rw-h, 44px); height: var(--pf-rw-h, 44px); box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    background: #3e3226; border: 2px solid #1e160c; border-radius: 5px;
    box-shadow: inset 0 0 8px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.15);
}
.pf-rw2-slot img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.pf-rw2-strip {
    flex: 1; height: 100%; box-sizing: border-box; padding: 0 12px;
    display: flex; align-items: center; gap: 8px;
    background: url('img/clan/clan/members_clan/clan_0003s_0033_rank_clan.webp') center / 100% 100% no-repeat;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.45));
}
.pf-rw2-val { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 22px; color: #2a1c08; letter-spacing: .5px; }
.pf-rw2-lbl { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 15px; color: #6b4a22; }
.pf-rw2-info {
    margin-left: auto; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #6b3c12; color: #ffdf8a; font-family: 'KatanaBold', sans-serif; font-size: 13px;
}
.pf-rw2.pf-rw-gear { cursor: pointer; }
.pf-rw2.pf-rw-gear:hover .pf-rw2-strip { filter: brightness(1.08) drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
#prefight-modal .pf-choice-lbl { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 19px; color: #f3e6c4; text-shadow: 0 1px 3px #000; }
#prefight-modal .pf-br-status { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 14px; font-weight: normal; border: 1px solid rgba(0,0,0,.4); }

/* ===== Боси на картках "Обери боса" — легкий idle-рух усередині фото-рамки ===== */
.bc-img-clip { width: 80px; height: 80px; overflow: hidden; }
.bc-img-idle {
    transform-origin: 50% 85%; /* хитається "від плечей", а не навколо центру */
    animation: bcIdle var(--idle-dur, 4s) ease-in-out var(--idle-delay, 0s) infinite var(--idle-dir, normal);
    will-change: transform;
}
/* масштаб ≥1.1 — запас по краях, щоб при зсуві/нахилі не світились порожні кути */
@keyframes bcIdle {
    0%   { transform: scale(1.10) translate(0, 0)       rotate(0deg); }
    25%  { transform: scale(1.12) translate(-1.5px, -1px) rotate(-1.2deg); }
    50%  { transform: scale(1.13) translate(0, -2px)    rotate(0deg); }
    75%  { transform: scale(1.12) translate(1.5px, -1px)  rotate(1.2deg); }
    100% { transform: scale(1.10) translate(0, 0)       rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .bc-img-idle { animation: none; transform: scale(1.1); } }
.bc-img-clip .bc-img { width: 100%; height: 100%; }
body.tg-hud-extracted .bc-img-clip { width: 52px; height: 52px; }

/* Фото боса в досьє (модалка атаки) — той самий idle-рух; .pf-photo-frame уже overflow:hidden */
#prefight-modal .pf-photo {
    transform-origin: 50% 85%;
    animation: bcIdle 4.2s ease-in-out infinite;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) { #prefight-modal .pf-photo { animation: none; transform: scale(1.1); } }

/* Що качає тренування — бейдж "+1 Сила" праворуч від "Мої очки" (іконки як у топ-панелі) */
.tn-stat-gain {
    position: absolute; left: 330px; top: 76px; width: 145px; height: 24px;
    display: flex; align-items: center; justify-content: flex-end; gap: 4px;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 16px; color: #2a6a10;
}
.tn-stat-gain img { width: 22px; height: 22px; object-fit: contain; }

/* ===== FAQ — каркас квестів (img/Qwest), категорії зліва, питання на паперових смужках ===== */
#faq-modal { z-index: 12500; }
.faq2-exit { position: absolute; left: 872px; top: 96px; width: 36px; height: 35px; cursor: pointer; z-index: 3; }
.faq2-exit:hover { filter: brightness(1.15); }
/* 8 категорій стовпчиком зліва від паперу, спрайт вкладки квестів podl_all (активна — podl_active) */
.faq2-tabs { position: absolute; left: 70px; top: 150px; width: 150px; display: flex; flex-direction: column; gap: 0; }
/* Пропорції спрайта вкладки 184x76 зберігаємо (×0.72 = 132x55) — раніше 184x46 розплющувало іконки */
.faq2-tab {
    position: relative; width: 132px; height: 55px; padding: 0 6px 0 48px; border: none; cursor: pointer;
    background: url('img/Qwest/qwest_0035_podl_all.webp') center / 100% 100% no-repeat;
    display: flex; align-items: center; text-align: left;
    opacity: .82; transition: transform .15s ease, opacity .15s, filter .15s;
}
.faq2-tab span { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 13px; line-height: 1.05; color: #2a1c08; }
.faq2-tab:hover { opacity: 1; }
.faq2-tab--active {
    opacity: 1; transform: translateX(-14px);
    background-image: url('img/Qwest/qwest_0034_podl_active.webp');
    filter: drop-shadow(0 0 4px rgba(255,210,90,.7));
}
/* Список — у межах темної картки Raster-4 (як .qw-list-viewport) */
.faq2-list {
    position: absolute; left: 249px; top: 170px; width: 546px; height: 362px;
    overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
    display: flex; flex-direction: column; gap: 8px; padding: 2px 0 10px; box-sizing: border-box;
}
.faq2-list::-webkit-scrollbar { display: none; }
.faq2-scroll-track {
    position: absolute; left: 806px; top: 170px; width: 19px; height: 362px; z-index: 2;
    background: url('img/clan/clan/base/clan_0005s_0014_Friend_modal_0013_Scrol_bar_bg-kopiia.webp') center / 100% 100% no-repeat;
}
.faq2-item { flex-shrink: 0; cursor: pointer; }
.faq2-q {
    min-height: 46px; box-sizing: border-box; padding: 6px 16px;
    display: flex; align-items: center; gap: 10px;
    background: url('img/clan/clan/members_clan/clan_0003s_0033_rank_clan.webp') center / 100% 100% no-repeat;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
    transition: filter .12s;
}
.faq2-item:hover .faq2-q { filter: brightness(1.06) drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.faq2-arrow { flex: 0 0 auto; font-size: 11px; color: #8a4e10; }
.faq2-q-text { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 17px; color: #2a1c08; line-height: 1.15; }
.faq2-item--open .faq2-q-text { color: #6b3c12; }
.faq2-a {
    margin: 4px 10px 2px; padding: 10px 14px;
    font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.45; color: #2a1c08;
    background: rgba(240,222,180,.92); border: 1px solid rgba(90,62,28,.45); border-radius: 4px;
    box-shadow: inset 0 0 12px rgba(120,80,30,.18);
}

/* ===== ТОП 100 — світлий каркас квестів (.qw-bg-*) замість темної рваної панелі ===== */
#leaderboard-modal .lb-overlay-bg { background: rgba(0,0,0,0.55); }
.lb2 .lb-bg-dark, .lb2 .lb-panel-main { display: none; }
.lb2 .qw-bg-outer, .lb2 .qw-bg-inner, .lb2 .qw-title-bg { z-index: 1; }
.lb2 .lb-title {
    z-index: 3; left: 233px; top: 92px; width: 160px; height: auto;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 1px; color: #2a1c08;
}
.lb2 .lb-close { left: 872px; top: 96px; width: 36px; height: 35px; }
/* Вкладки ПОВАГА / УРОН — спрайти вкладок квестів 184x76 */
.lb2-tab {
    position: absolute; z-index: 2; left: 52px; width: 184px; height: 76px; padding: 0 0 0 64px;
    border: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
    background: url('img/Qwest/qwest_0035_podl_all.webp') center / 100% 100% no-repeat;
    opacity: .82; transition: transform .15s ease, opacity .15s, filter .15s;
}
/* id+клас — перебиває старі #lb-sort-* { left:146px } з темного дизайну */
#lb-sort-respect.lb2-tab { left: 52px; top: 177px; }
#lb-sort-damage.lb2-tab  { left: 52px; top: 256px; }
.lb2-tab:hover { opacity: 1; }
.lb2-tab.active {
    opacity: 1; transform: translateX(-14px);
    background-image: url('img/Qwest/qwest_0034_podl_active.webp');
    filter: drop-shadow(0 0 4px rgba(255,210,90,.7));
}
.lb2-tab-icon { width: 22px; height: 24px; object-fit: contain; }
.lb2-tab span { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 17px; color: #2a1c08; }
/* Список — у межах картки Raster-4 (як .qw-list-viewport) */
.lb2 .lb-list-viewport { left: 262px; top: 172px; width: 532px; height: 358px; }
.lb2 .lb-loading, .lb2 .lb-empty { left: 262px; top: 260px; width: 532px; color: #6b4a28; }
.lb2 .lb-scroll-track {
    left: 806px; top: 170px; width: 19px; height: 362px; background: url('img/clan/clan/base/clan_0005s_0014_Friend_modal_0013_Scrol_bar_bg-kopiia.webp') center / 100% 100% no-repeat;
}
.lb2 .lb-scroll-thumb { left: 0; top: 5px; width: 19px; height: 86px; background: url('img/clan/clan/base/clan_0005s_0013_Friend_modal_0012_scrollbar-kopiia.webp') center / 100% 100% no-repeat; }
/* Рядки 4-100 — світла паперова смужка + номер у темному слоті */
.lb2 .lb-tpl-row {
    left: 4px; width: 520px;
    background: url('img/clan/clan/members_clan/clan_0003s_0033_rank_clan.webp') center / 100% 100% no-repeat;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.3));
}
.lb2 .lb-tpl-row.lb-row-mine {
    filter: drop-shadow(0 0 2px rgba(255,224,130,.95)) drop-shadow(0 0 6px rgba(255,210,90,.85)) drop-shadow(0 0 12px rgba(255,200,70,.6));
}
.lb2 .lb-tpl-rank {
    left: 12px; top: 5px; width: 34px; height: 25px; line-height: 25px;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 15px; color: #ffdf8a;
    background: #4a3620; border: 1px solid #2a1c08; border-radius: 4px;
    box-shadow: inset 0 0 5px rgba(0,0,0,.6);
}
.lb2 .lb-nickname { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 15px; color: #2a1c08; }
.lb2 .lb-score { font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 15px; font-weight: normal; color: #2a1c08; }
.lb2 .lb-tpl-row .lb-score { font-size: 14px; }

/* ===== ТОП 100 — світіння п'єдесталу (1-3): пульсуюче сяйво кольору медалі + відблиск,
   що пробігає по стрічці. Анімуємо саме .lb-row-bg (а не весь рядок), щоб не збивати
   золоте підсвічення власного рядка (.lb-row-mine), яке висить filter'ом на рядку. ===== */
.lb-podium-row .lb-row-bg { will-change: filter; }
.lb-row-1 .lb-row-bg { animation: lbGlow1 4.8s ease-in-out infinite; }
.lb-row-2 .lb-row-bg { animation: lbGlow2 4.8s ease-in-out 1.6s infinite; }
.lb-row-3 .lb-row-bg { animation: lbGlow3 4.8s ease-in-out 3.2s infinite; }
@keyframes lbGlow1 {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(255,215,90,.5)); }
    50%      { filter: drop-shadow(0 0 7px rgba(255,210,70,1)) drop-shadow(0 0 14px rgba(255,190,40,.65)) brightness(1.08); }
}
@keyframes lbGlow2 {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(220,230,240,.45)); }
    50%      { filter: drop-shadow(0 0 7px rgba(225,235,250,.95)) drop-shadow(0 0 13px rgba(190,205,225,.6)) brightness(1.08); }
}
@keyframes lbGlow3 {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(230,140,70,.45)); }
    50%      { filter: drop-shadow(0 0 7px rgba(240,150,70,.95)) drop-shadow(0 0 13px rgba(210,110,40,.6)) brightness(1.08); }
}
/* Відблиск — світла смуга, обрізана по формі спрайта стрічки (mask = той самий row_bg) */
.lb-podium-row::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(105deg, transparent 0%, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%, transparent 100%);
    background-size: 250% 100%; background-repeat: no-repeat;
    -webkit-mask: var(--lb-row-mask) center / 100% 100% no-repeat; mask: var(--lb-row-mask) center / 100% 100% no-repeat;
    animation: lbShine 7.2s ease-in-out infinite;
}
.lb-row-1 { --lb-row-mask: url('img/Top100/row_bg_rank1.webp'); }
.lb-row-2 { --lb-row-mask: url('img/Top100/row_bg_rank2.webp'); }
.lb-row-3 { --lb-row-mask: url('img/Top100/row_bg_rank3.webp'); }
.lb-row-2::after { animation-delay: 2.4s; }
.lb-row-3::after { animation-delay: 4.8s; }
@keyframes lbShine {
    0%   { background-position: 150% 0; }
    45%  { background-position: -50% 0; }
    100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .lb-podium-row .lb-row-bg, .lb-podium-row::after { animation: none; }
}

/* ===== Екран завантаження — стиль гри (замість зеленого неону) ===== */
#loader-screen {
    background: radial-gradient(ellipse at center, #3a2a16 0%, #1c140a 60%, #0d0905 100%);
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif;
}
.loader-card {
    width: 380px; padding: 34px 36px 30px; box-sizing: border-box;
    background: url('img/clan/Clan_bg_main_vkladka.webp') center / 100% 100% no-repeat;
    border: none; border-radius: 0;
    box-shadow: none; filter: drop-shadow(0 10px 24px rgba(0,0,0,.65));
    color: #2a1c08;
}
.loader-title { font-size: 24px; letter-spacing: 1px; color: #2a1c08; text-shadow: 0 1px 0 rgba(255,255,255,.3); margin-bottom: 18px; }
/* Смуга як шкала тренувань: 10 "піґулок" (traning bgProgresT / ProgresT) */
.loader-bar {
    width: 300px; height: 16px; margin: 0 auto; box-sizing: border-box;
    background: url('img/bd/traning_0000_bgProgresT.webp') 0 0 / 30px 100% repeat-x;
    border: none; border-radius: 0; overflow: hidden;
}
.loader-fill {
    height: 100%;
    background: url('img/bd/traning_0002_ProgresT-kopiia-2.webp') 1px 50% / 28px 9px repeat-x;
    transition: width .15s ease;
}
.loader-percent { font-size: 16px; color: #6b3c12; }
/* Компас-спінер: золотий і "жирніший" (nato_gold.svg з обведенням), без інверсії/неону */
.loader-nato-spin {
    width: 78px; height: 78px;
    filter: drop-shadow(0 1px 0 rgba(255,240,200,.5));
    animation-duration: 1.6s;
}
#nato-spinner { width: 40px; height: 40px; }
#nato-spinner img { filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)) drop-shadow(0 0 5px rgba(255,200,80,.5)); }
.scene-loading-overlay { background: rgba(28,20,10,0.9); }
.scene-loading-overlay .loader-nato-spin { filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }

/* ===== Battle Pass — відблиск на преміум-шляху (як на п'єдесталі топ-100):
   світла смуга пробігає по картці, обрізана по формі спрайта (mask = той самий фон) ===== */
.bp-premium-list .bp-slot::after,
.bp-premium-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
    background: linear-gradient(105deg, transparent 0%, transparent 40%, rgba(255,245,200,.6) 50%, transparent 60%, transparent 100%);
    background-size: 250% 100%; background-repeat: no-repeat;
    -webkit-mask: var(--bp-shine-mask) center / 100% 100% no-repeat; mask: var(--bp-shine-mask) center / 100% 100% no-repeat;
    animation: lbShine 6s ease-in-out infinite;
}
.bp-premium-list .bp-slot { --bp-shine-mask: url('img/battle_pass/battle_pass_0028_premium_tier_list.png'); }
.bp-premium-hero          { --bp-shine-mask: url('img/battle_pass/battle_pass_0036_premium_tier.png'); }
/* хвиля зліва направо: кожна наступна картка трохи пізніше */
.bp-premium-list .bp-slot:nth-child(5n+1)::after { animation-delay: .35s; }
.bp-premium-list .bp-slot:nth-child(5n+2)::after { animation-delay: .7s; }
.bp-premium-list .bp-slot:nth-child(5n+3)::after { animation-delay: 1.05s; }
.bp-premium-list .bp-slot:nth-child(5n+4)::after { animation-delay: 1.4s; }
.bp-premium-list .bp-slot:nth-child(5n)::after   { animation-delay: 1.75s; }
@media (prefers-reduced-motion: reduce) {
    .bp-premium-list .bp-slot::after, .bp-premium-hero::after { animation: none; opacity: 0; }
}

/* ===== Сіра панель під "Лут": рейд-івент і голосування (js/raid.js) =====
   absolute у координатах канви гри (як .left-hud-col) — не впливає на flex-колонку правої панелі */
.rp-events {
    /* ряд: 🗳 голосування, праворуч ⚡ рейд; без голосування рейд стає на його місце (flex) */
    position: absolute; left: 818px; top: 372px; width: 208px; z-index: 1100;
    display: flex; flex-direction: row; align-items: flex-start; gap: 8px;
}
.raid-badge, .poll-badge { border: none; background: transparent; padding: 0; cursor: pointer; position: relative; }
.raid-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.raid-badge img { width: 100px; height: auto; aspect-ratio: 84 / 51; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); animation: raidPulse 2.4s ease-in-out infinite; }
.raid-badge.raid-scheduled img { animation: none; filter: grayscale(.35) drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
@keyframes raidPulse {
    0%, 100% { filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
    50%      { filter: drop-shadow(0 0 8px rgba(255,150,40,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
}
.raid-badge-timer {
    padding: 1px 8px; border-radius: 4px; background: rgba(20,14,8,.85); border: 1px solid #8a5a20;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 13px; color: #ffdf8a; white-space: nowrap;
}
.poll-badge { display: block; }
.poll-badge img { display: block; width: 84px; height: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.poll-badge:hover, .raid-badge:hover { filter: brightness(1.1); }
.poll-badge-dot {
    position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
    border-radius: 9px; background: #d8352a; color: #fff; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,.6);
}
@media (prefers-reduced-motion: reduce) { .raid-badge img { animation: none; } }

/* Вікно рейду / голосувань */
#raid-modal { z-index: 12500; }
.raid-scroll-track { left: 768px; top: 215px; height: 307px; }
.raid-body { padding: 4px 10px 14px; box-sizing: border-box; font-family: 'KatanaBold', 'Bebas Neue', sans-serif; color: #2a1c08; }
.raid-hero { display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; }
.raid-hero img { width: 120px; height: 73px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.raid-name { font-size: 22px; color: #6b3c12; }
.raid-desc { font-size: 15px; color: #3a2a14; }
.raid-status {
    padding: 8px 12px; margin-bottom: 8px; border-radius: 4px; font-size: 16px; text-align: center;
    background: rgba(90,62,28,.14); border: 1px solid rgba(90,62,28,.4);
}
.raid-status.raid-active { background: rgba(200,90,20,.18); border-color: #b0561a; }
.raid-status b { font-size: 20px; color: #8a3a08; margin-left: 6px; }
.raid-note { font-family: 'Inter', sans-serif; font-size: 12.5px; color: #5a3e1c; line-height: 1.4; }
.poll-card { padding: 8px 10px 10px; margin-bottom: 10px; background: rgba(90,62,28,.1); border: 1px solid rgba(90,62,28,.35); border-radius: 5px; }
.poll-card.poll-closed { opacity: .8; }
.poll-q { font-size: 18px; color: #2a1c08; line-height: 1.15; }
.poll-sub { font-size: 13px; color: #8a3a08; margin-top: 2px; }
.poll-meta { font-family: 'Inter', sans-serif; font-size: 12px; color: #5a3e1c; margin: 3px 0 6px; }
.raid-opt {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px;
    min-height: 38px; padding: 0 8px 0 12px; margin-top: 5px; border-radius: 4px;
    background: url('img/clan/clan/members_clan/clan_0003s_0033_rank_clan.webp') center / 100% 100% no-repeat;
}
.raid-opt-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(210,150,40,.35); pointer-events: none; transition: width .3s; }
.raid-opt.mine { box-shadow: inset 0 0 0 2px #2a7a10; }
.raid-opt.won  { box-shadow: inset 0 0 0 2px #c08a10; }
.raid-opt-date { position: relative; flex: 1; font-size: 16px; }
.raid-opt-votes { position: relative; font-size: 14px; color: #5a3e1c; }
.raid-vote-btn { position: relative; width: 104px; height: 30px; font-size: 14px; }
.raid-won { position: relative; font-size: 18px; }
/* Обидві іконки панелі подій — однаковий розмір, як у кнопки голосування (натуральний 84x51) */
.rp-events .poll-badge img,
.rp-events .raid-badge img { width: 84px; height: 51px; aspect-ratio: auto; }
.rp-events { width: 176px; }

/* Особисте підсилення рейду за креслення */
.raid-boost {
    display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 10px;
    background: url('img/clan/clan/members_clan/clan_0003s_0033_rank_clan.webp') center / 100% 100% no-repeat;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.raid-boost-text { flex: 1; font-size: 15px; color: #2a1c08; line-height: 1.2; }
.raid-boost-have { display: flex; align-items: center; gap: 3px; margin-top: 2px; font-family: 'Inter', sans-serif; font-size: 12px; color: #5a3e1c; }
.raid-boost-have img, .raid-boost-btn img { width: 18px; height: 18px; object-fit: contain; }
.raid-boost-btn { display: flex; align-items: center; justify-content: center; gap: 4px; width: 90px; height: 34px; font-size: 16px; }
.raid-boost-btn[disabled] { filter: grayscale(1) brightness(.85); cursor: not-allowed; }
.raid-boost-on { box-shadow: inset 0 0 0 2px #c05a10; }
.raid-boost-on b { font-size: 18px; color: #8a3a08; }

/* "Обери боса" — смугу-заголовок прибрано (її все одно перекривали кнопки "Купити"
   топ-панелі). Шапка лишається нульової висоти лише як якір для кнопки закриття. */
#boss-selection-panel .bsp-header { height: 0; background: none; z-index: 5; overflow: visible; }
#boss-selection-panel #boss-close-btn { top: 22px; right: 8px; transform: none; width: 34px; height: 34px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
#boss-selection-panel #boss-close-btn:hover { filter: brightness(1.3) drop-shadow(0 0 4px #f05050); }
#boss-selection-panel #boss-list-scroll { padding-top: 14px; }
/* Скролбар зі взводів замість нативного (до верхнього краю нижньої панелі) */
#boss-selection-panel #boss-list-scroll { scrollbar-width: none; }
#boss-selection-panel #boss-list-scroll::-webkit-scrollbar { display: none; }
#boss-selection-panel .bsp-scroll-track {
    position: absolute; right: 12px; top: 70px; width: 19px; height: 490px; z-index: 5;
    background: url('img/clan/clan/base/clan_0005s_0014_Friend_modal_0013_Scrol_bar_bg-kopiia.webp') center / 100% 100% no-repeat;
}

/* Подарунки: вкладки Нові / Історія + відправник у рядку */
.gr-tabs { position: absolute; left: 520px; top: 140px; display: flex; gap: 6px; z-index: 2; }
.gr-tab {
    min-width: 96px; height: 32px; padding: 0 12px 2px; border: none; cursor: pointer;
    background: url('img/clan/clan/members_clan/clan_0003s_0024_63.webp') center / 100% 100% no-repeat;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 15px; color: #3a2205;
    filter: grayscale(.8) brightness(.9); opacity: .85; transition: filter .15s, opacity .15s;
}
.gr-tab:hover { opacity: 1; }
.gr-tab--active { filter: none; opacity: 1; }
.gr-scroll-track { left: 768px; top: 215px; height: 307px; }
.gr-row-from {
    position: absolute; left: 116px; top: 46px; width: 295px;
    font-family: 'Inter', sans-serif; font-size: 12px; color: #5a3e1c;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gr-row-from b { color: #2a1c08; }
.gr-row-date { width: 104px; }
.gr-row-new .gr-row-bg { filter: drop-shadow(0 0 4px rgba(255,200,60,.9)); }

/* Профіль: дії для не-друга */
.ppp-rel-actions { flex-wrap: wrap; }
.ppp-rel-note { width: 100%; text-align: center; font-size: 12px; color: #d8c8a0; margin-top: 4px; }
.gr-row-from .player-link, .gr-row-avatar.player-link { cursor: pointer; }
.gr-row-from .player-link:hover { text-decoration: underline; }
.pc-paid { margin-left: 10px; font-size: 13px; color: #2a6a10; white-space: nowrap; }
.pc-status { width: 480px; }
/* Налаштування друзів */
.frm-settings-btn {
    position: absolute; right: 52px; top: 8px; z-index: 5; width: 40px; height: 40px; padding: 0;
    border: none; background: transparent; cursor: pointer;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); transition: transform .3s ease, filter .15s;
}
.frm-settings-btn img { width: 100%; height: 100%; display: block; }
.frm-settings-btn:hover { transform: rotate(60deg); }
.frm-settings-btn:hover { filter: brightness(1.2); }
#friend-settings-modal { z-index: 12600; }
.fs-body { padding: 6px 12px 16px; box-sizing: border-box; font-family: 'KatanaBold', 'Bebas Neue', sans-serif; color: #2a1c08; }
.fs-count { font-size: 16px; margin-bottom: 8px; }
.fs-block { padding: 8px 12px 10px; margin-bottom: 10px; background: rgba(90,62,28,.12); border: 1px solid rgba(90,62,28,.4); border-radius: 5px; }
.fs-h { font-size: 17px; color: #6b3c12; }
.fs-hint { font-family: 'Inter', sans-serif; font-size: 12px; color: #5a3e1c; margin: 2px 0 6px; line-height: 1.35; }
.fs-block select { width: 100%; height: 32px; font-size: 14px; border: 1px solid #6b4a1e; border-radius: 4px; background: #f3e6c4; color: #2a1c08; }
.fs-check { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-family: 'Inter', sans-serif; font-size: 13px; }
.fs-save { display: block; margin: 4px auto 0; width: 150px; }
.frm-paid { font-size: 11px; color: #ffdf8a; background: rgba(0,0,0,.35); padding: 0 5px; border-radius: 4px; }

/* 🔥 Підігрів */
.rp-search-wrap .rp-btn-warm { position: absolute; top: 0; left: 416px; }
.rp-btn-warm > span { white-space: nowrap; }
#warm-modal { z-index: 12500; }
.warm-head { position: absolute; left: 290px; top: 197px; width: 460px; font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 15px; color: #2a1c08; }
.warm-head b { color: #8a3a08; }
.warm-viewport { top: 224px; height: 250px; }
.warm-scroll-track { left: 768px; top: 224px; height: 250px; }
.warm-list { padding: 2px 6px 6px; box-sizing: border-box; }
.warm-row {
    display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px; margin-bottom: 5px; cursor: pointer;
    background: url('img/clan/clan/members_clan/clan_0003s_0033_rank_clan.webp') center / 100% 100% no-repeat;
    font-family: 'KatanaBold', 'Bebas Neue', sans-serif; color: #2a1c08;
}
.warm-row.dis { opacity: .6; cursor: default; }
.warm-row input { width: 18px; height: 18px; accent-color: #b0561a; }
.warm-ava { width: 34px; height: 34px; object-fit: cover; border-radius: 4px; border: 2px solid #5a3e1c; }
.warm-name { flex: 1; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.warm-lvl { font-size: 13px; color: #5a3e1c; }
.warm-note { min-width: 90px; text-align: right; font-size: 13px; color: #2a6a10; }
.warm-foot { position: absolute; left: 290px; top: 482px; width: 470px; display: flex; align-items: center; justify-content: space-between; }
.warm-all { display: flex; align-items: center; gap: 6px; font-family: 'KatanaBold', 'Bebas Neue', sans-serif; font-size: 15px; color: #2a1c08; cursor: pointer; }
.warm-all input { width: 18px; height: 18px; accent-color: #b0561a; }
.warm-send { width: 150px; }
.warm-send[disabled] { filter: grayscale(1); cursor: not-allowed; }
/* Профіль: ID і видалення друга */
.ppp-id { font-size: 12px; color: #d8c8a0; cursor: pointer; opacity: .85; }
.ppp-id:hover { opacity: 1; text-decoration: underline; }
.ppp-btn-danger { filter: hue-rotate(-35deg) saturate(1.4); }
.sch-card-id { font-size: 12px; color: #8a6a40; font-weight: normal; margin-left: 4px; }
.frm-exp { font-size: 11px; color: #c9b890; margin-left: 4px; }

/* Гардероб — режим "Локації" */
.cs-loc-card { cursor: default; }
.cs-loc-thumb {
    position: absolute; left: 6px; top: 9px; width: 139px; height: 132px; border-radius: 7px;
    background-size: cover; background-position: center; z-index: 0;
}
.cs-loc-locked .cs-loc-thumb { filter: grayscale(.85) brightness(.6); }
.cs-loc-lock { position: absolute; left: 0; right: 0; top: 52px; text-align: center; font-size: 30px; z-index: 2; text-shadow: 0 2px 4px #000; }
.cs-loc-on .cs-card-frame { filter: drop-shadow(0 0 6px rgba(255,200,60,.95)); }
.cs-loc-active { font-family: 'Bebas Neue', sans-serif; font-size: 15px; color: #2a6a10; }
.cs-loc-how { font-size: 11px; line-height: 1.15; text-align: center; color: #7a3a10; }

/* Battle Pass: нагорода-локація — мініатюра картинки в рамці замість іконки */
.bp-slot .bp-rw-big.bp-rw-location img {
    width: 92px; height: 69px; object-fit: cover; border-radius: 4px;
    border: 2px solid #c89b3c; box-shadow: 0 2px 5px rgba(0,0,0,.6); filter: none;
}
.bp-slot .bp-rw-big.bp-rw-location span { font-size: 16px; }
.bp-rw-location + .bp-rw-extra .bp-rw span { font-size: 13px; }

/* Гардероб: повага за покупку */
.cs-card-respect { display: flex; align-items: center; gap: 3px; font-family: 'Bebas Neue', sans-serif; font-size: 13px; color: #5a3e1c; }
.cs-card-respect img { width: 14px; height: 14px; object-fit: contain; }
.cs-card-respect.rare { color: #b07a00; text-shadow: 0 0 4px rgba(255,200,60,.6); }

/* Дерево талантів — усі картки однакові: фіксована висота, опис і підпис прогресу
   займають однакову кількість рядків, кнопка "Вкласти" притиснута до низу. Так рівні
   картки стоять на одній лінії в усіх чотирьох гілках. */
#progress-modal .tlm-talent {
    height: 200px; box-sizing: border-box;
    display: flex; flex-direction: column;
}
#progress-modal .tlm-t-top { min-height: 20px; }
#progress-modal .tlm-t-desc {
    height: 32px; line-height: 16px; margin-bottom: 6px; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
#progress-modal .tlm-t-progress { margin-bottom: 0; }
#progress-modal .tlm-t-progress-label {
    height: 28px; line-height: 14px; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
#progress-modal .tlm-t-bottom { margin-top: auto; align-items: center; }
#progress-modal .tlm-connector { height: 22px; line-height: 22px; text-align: center; }
/* компактніше — дерево вміщається у вкладку без прокрутки */
#progress-modal .tlm-talent { height: 162px; padding: 8px 10px 8px; }
#progress-modal .tlm-t-top { min-height: 18px; margin-bottom: 1px; }
#progress-modal .tlm-t-name { font-size: 14px; }
#progress-modal .tlm-t-desc { height: 30px; line-height: 15px; font-size: 11.5px; margin-bottom: 4px; }
#progress-modal .tlm-t-progress-track { margin-bottom: 2px; }
#progress-modal .tlm-t-progress-label {
    height: 13px; line-height: 13px; font-size: 10px;
    display: block; white-space: nowrap; text-overflow: ellipsis;
}
#progress-modal .tlm-invest-btn { height: 26px; }
#progress-modal .tlm-connector { height: 14px; line-height: 14px; font-size: 12px; }
#progress-modal .tlm-branch-title { padding: 3px 0 3px; margin-bottom: 6px; }
/* 4 однакові вузькі колонки: minmax(0,1fr) не дає довгому тексту/кнопці розпирати колонку
   (через це права гілка "General" вилазила за край паперу, а колонки були різної ширини) */
#progress-modal .tlm-tree { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-right: 14px; box-sizing: border-box; }
#progress-modal .tlm-branch, #progress-modal .tlm-talent { min-width: 0; }
#progress-modal .tlm-t-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#progress-modal .tlm-t-bottom { gap: 6px; }
#progress-modal .tlm-invest-btn { width: 82px; flex-shrink: 0; }

/* ===== Підказка "Переверніть телефон" (лише сенсорні пристрої в портретній орієнтації) ===== */
#rotate-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    background: #0b0f12;
    color: #e8d090;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 24px;
    font-family: 'Bebas Neue', sans-serif;
}
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    #rotate-overlay { display: flex; }
}
.rotate-phone {
    width: 56px;
    height: 96px;
    border: 4px solid #e8d090;
    border-radius: 10px;
    position: relative;
    animation: rotate-hint 2s ease-in-out infinite;
}
.rotate-phone::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    width: 12px;
    height: 4px;
    margin-left: -6px;
    border-radius: 2px;
    background: #e8d090;
}
.rotate-text { font-size: 28px; letter-spacing: 1px; }
.rotate-sub  { font-size: 15px; opacity: 0.7; font-family: 'Verdana', sans-serif; }
@keyframes rotate-hint {
    0%, 25%   { transform: rotate(0deg); }
    55%, 100% { transform: rotate(-90deg); }
}

/* ===== Курс молодого бійця (js/newbie.js) — спрайти з Battle Pass і квестів ===== */
.left-hud-col #newbie-badge,
#newbie-badge {
    position: absolute;
    top: -2px;
    right: 0;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e74c3c;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 6px rgba(231, 76, 60, 0.8);
    animation: nb-pulse 1.4s ease-in-out infinite;
}
@keyframes nb-pulse { 50% { transform: scale(1.18); } }

.nb-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nb-panel {
    position: relative;
    width: min(800px, 94%);
    padding: 26px 34px 24px;
    background: url('img/battle_pass/battle_pass_0048_bgMain.png') center / 100% 100% no-repeat;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.7));
    color: #3a2a14;
    text-align: center;
    font-family: 'Verdana', sans-serif;
}
.nb-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 42px;
    height: 41px;
    padding: 0;
    border: none;
    background: url('img/battle_pass/battle_pass_0043_btn_close.png') center / contain no-repeat;
    font-size: 0;
    cursor: pointer;
    transition: transform 0.15s;
}
.nb-close:hover { transform: scale(1.1); }
.nb-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 38px;
    letter-spacing: 2px;
    color: #3a2a14;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.nb-sub { font-size: 13px; color: #5c4424; margin: 0 0 18px; }
.nb-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}
.nb-day {
    position: relative;
    aspect-ratio: 111 / 148;
    padding: 10% 6% 8%;
    background: url('img/battle_pass/battle_pass_0041_Free_tier_list.png') center / 100% 100% no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #f0e2b8;
    transition: transform 0.2s;
}
.nb-day--final { background-image: url('img/battle_pass/battle_pass_0028_premium_tier_list.png'); }
.nb-day-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 17px;
    letter-spacing: 1px;
    color: #f5dfa0;
    text-shadow: 0 1px 2px #000;
}
.nb-rewards { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; align-items: center; }
.nb-reward {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px #000, 0 0 3px #000;
    white-space: nowrap;
}
.nb-reward img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }
.nb-day--today {
    transform: scale(1.1);
    filter: drop-shadow(0 0 12px rgba(255, 205, 60, 1)) drop-shadow(0 0 4px rgba(255, 230, 140, 1));
    animation: nb-glow 1.6s ease-in-out infinite;
    z-index: 1;
}
@keyframes nb-glow { 50% { filter: drop-shadow(0 0 22px rgba(255, 210, 80, 1)) drop-shadow(0 0 6px rgba(255, 240, 170, 1)); } }
.nb-day--locked .nb-rewards { opacity: 0.75; }
.nb-day--claimed .nb-rewards { opacity: 0.2; }
.nb-day--claimed .nb-day-label { opacity: 0.5; }
.nb-check {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52%;
    transform: translate(-50%, -40%);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}
.nb-lock {
    position: absolute;
    bottom: 5%;
    right: 7%;
    width: 13px;
    filter: drop-shadow(0 1px 2px #000);
}
.nb-claim {
    margin-top: 20px;
    width: 307px;
    max-width: 80%;
    height: 50px;
    border: none;
    background: url('img/battle_pass/battle_pass_0046_button_buy.png') center / 100% 100% no-repeat;
    color: #2b1d08;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 0 rgba(255, 240, 180, 0.6);
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s;
}
.nb-claim:hover { transform: scale(1.04); filter: brightness(1.1); }
.nb-claim:disabled { opacity: 0.6; cursor: wait; }
.nb-note { margin-top: 14px; font-size: 13px; font-weight: bold; color: #5c4424; min-height: 16px; }