* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* =========================================
   PNG UI — ЗБЕРЕЖЕННЯ ПРОПОРЦІЙ
   ========================================= */

/*
   Для нових PNG, які використовуються
   як background-image, додавати клас:
   ui-png-preserve

   PNG не можна розтягувати через
   background-size:100% 100%.
*/
.ui-png-preserve {
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
}

/*
   PNG, вставлені через <img>,
   також завжди зберігають пропорції.
*/
img[src*="assets/ui/"][src$=".png"] {
    object-fit:contain;
}
body {
    background-color: #f4f5f7;
    color: #333333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =========================================
   ВЕРХНЯ ПАНЕЛЬ — PNG UI
   ========================================= */
#top-bar {
    position:sticky;
    top:0;
    z-index:100;
    display:grid;
    grid-template-columns:50% 45%;
justify-content:center;
    grid-template-rows:58px 58px;
gap:1px 4px;
min-height:123px;
padding:3px 5px;
    background-image:
        url("assets/ui/wood-texture.svg"),
        linear-gradient(180deg,#4b2c17,#160d08);
    background-repeat:repeat,no-repeat;
    border-bottom:2px solid var(--fantasy-gold);
    box-shadow:0 4px 10px rgba(0,0,0,.72);
}

.top-hp-btn,
.top-mp-block,
.top-inv-btn {
    min-width:0;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:0;
    box-shadow:none;
    background-color:transparent;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    font-family:Georgia,"Times New Roman",serif;
    font-weight:bold;
    text-shadow:
        0 2px 2px #000,
        0 0 4px rgba(0,0,0,.9);
}

.top-hp-btn {
    grid-column:1;
    grid-row:1;
    padding:0 8px 0 29%;
    color:#fff0d5;
    background-image:url("assets/ui/frames/hp-frame.png");
}

.top-mp-block {
    grid-column:1;
    grid-row:2;
    padding:0 8px 0 29%;
    color:#e6f7ff;
    background-image:url("assets/ui/frames/mp-frame.png");
}

.top-stat-value {
    width:100%;
    text-align:center;
    white-space:nowrap;
    font-size:clamp(11px,3.2vw,15px);
}

.top-stat-sep {
    padding:0 3px;
    color:#e5c98c;
}

.top-menu-wrap {
    grid-column:2;
    grid-row:1 / 3;
    min-width:0;
    position:relative;
    display:flex;
}

.top-menu-wrap .top-inv-btn {
    width:100%;
    height:100%;
}

.top-inv-btn {
    padding:0 6px;
    color:#ffe29a;
    background-image:url("assets/ui/frames/menu-frame.png");
    font-size:clamp(12px,3.7vw,17px);
    cursor:pointer;
}

.top-inv-btn:active {
    filter:brightness(1.16);
}

/* =========================================
   ВЕРХНЄ ВИПАДАЮЧЕ МЕНЮ
   ========================================= */
.top-menu {
    display:none;
    position:absolute;
    top:calc(100% + 7px);
    right:0;
    width:190px;
    overflow:hidden;
    padding:5px;
    background-image:
        url("assets/ui/wood-texture.svg"),
        linear-gradient(145deg,#42291a,#1c110b);
    border:2px solid var(--fantasy-gold);
    border-radius:8px;
    box-shadow:
        inset 0 0 0 1px #754a20,
        0 7px 18px rgba(0,0,0,.72);
    z-index:500;
}
.top-menu.open {
    display:flex;
    flex-direction:column;
    gap:4px;
}
.top-menu-item {
    width:100%;
    padding:10px;
    text-align:left;
    font-size:13px;
    font-family:inherit;
    color:var(--fantasy-text-light);
    background:rgba(33,20,12,.62);
    border:1px solid transparent;
    border-radius:5px;
    cursor:pointer;
}
.top-menu-item:not(:disabled):active {
    color:var(--fantasy-gold-light);
    background:rgba(224,180,78,.16);
    border-color:var(--fantasy-bronze);
}
.top-menu-item:disabled {
    opacity:.45;
    color:#87765d;
    background:rgba(25,18,13,.5);
    cursor:default;
}

/* Локація */
#location-card {
    position:relative;
    margin:10px 10px 12px;
    padding:10px 18px 20px;
    min-height:100px;
    color:var(--fantasy-text-dark);
    
    border:none;
    border-radius:0;
    box-shadow:0 6px 14px rgba(0,0,0,.34);
    overflow:hidden;
}

#location-title {
    margin:0 0 4px;
    padding:4px 0 5px;
    text-align:center;
    font-family:Georgia,"Times New Roman",serif;
    font-size:22px;
    font-weight:700;
    color:#5c3411;
    text-shadow:0 1px 0 rgba(255,245,210,.7);
    position:relative;
}

#location-title::after {
    content:"";
    display:block;
    width:150px;
    height:10px;
    margin:3px auto 0;
    background-image:url("assets/ui/ornaments/ornament-divider.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
}

#location-desc {
    margin:0 0 4px;
    padding:0 4px;
    text-align:center;
    font-size:14px;
    line-height:1.45;
    color:#4b321d;
}


/* =========================================
   ПЕРЕХОДИ ПО ЛОКАЦІЯХ — CSS FRAME
   ========================================= */
#transitions {
    display:flex;
    flex-direction:column;
    gap:7px;
    margin:0 4px;
}

.trans-btn {
    position:relative;
    width:100%;
    min-height:48px;
    padding:7px 30px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    text-align:center;
    font-family:Georgia,"Times New Roman",serif;
    font-size:13px;
    font-weight:700;
    color:#f6e3b6;
    text-shadow:
        0 2px 2px #000,
        0 0 4px rgba(0,0,0,.75);
    border:1px solid #8b6545;
    border-radius:7px;
    background:
        linear-gradient(
            180deg,
            #4b3422 0%,
            #2b1d14 52%,
            #17100c 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255,224,154,.16),
        inset 0 -4px 8px rgba(0,0,0,.48),
        inset 0 0 0 1px rgba(224,180,78,.08),
        0 2px 6px rgba(0,0,0,.42);
    cursor:pointer;
    transition:
        filter .12s ease,
        transform .08s ease,
        border-color .12s ease;
}

.trans-btn::before {
    content:"";
    position:absolute;
    inset:3px;
    border:1px solid rgba(224,180,78,.22);
    border-radius:4px;
    pointer-events:none;
}

.trans-btn::after {
    content:"";
    position:absolute;
    left:9px;
    right:9px;
    top:50%;
    height:1px;
    transform:translateY(-50%);
    background:
        linear-gradient(
            90deg,
            rgba(224,180,78,.55) 0,
            rgba(224,180,78,0) 13%,
            rgba(224,180,78,0) 87%,
            rgba(224,180,78,.55) 100%
        );
    pointer-events:none;
}

.trans-btn:active:not(:disabled) {
    transform:translateY(1px);
    filter:brightness(1.14);
    border-color:var(--fantasy-gold);
}

.trans-btn:disabled {
    opacity:.5;
    cursor:default;
    filter:saturate(.55);
}

/* =========================================
   МІСЬКІ СЕРВІСИ — КОМПАКТНИЙ РЯД
   ========================================= */
.city-service-row {
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
}

.city-service-btn {
    position:relative;
    min-width:0;
    min-height:44px;
    padding:7px 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    text-align:center;
    font-family:Georgia,"Times New Roman",serif;
    font-size:11px;
    line-height:1.15;
    font-weight:700;
    color:#f6e3b6;
    text-shadow:
        0 2px 2px #000,
        0 0 4px rgba(0,0,0,.75);
    border:1px solid #8b6545;
    border-radius:7px;
    background:
        linear-gradient(
            180deg,
            #4b3422 0%,
            #2b1d14 52%,
            #17100c 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255,224,154,.16),
        inset 0 -4px 8px rgba(0,0,0,.48),
        inset 0 0 0 1px rgba(224,180,78,.08),
        0 2px 6px rgba(0,0,0,.42);
    cursor:pointer;
}

.city-service-btn::before {
    content:"";
    position:absolute;
    inset:3px;
    border:1px solid rgba(224,180,78,.22);
    border-radius:4px;
    pointer-events:none;
}

.city-service-btn:active:not(:disabled) {
    transform:translateY(1px);
    filter:brightness(1.14);
    border-color:var(--fantasy-gold);
}

.city-service-btn:disabled {
    opacity:.5;
    cursor:default;
    filter:saturate(.55);
}

.guild-action-row {
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
}

.guild-action-btn {
    min-height:44px;
}

/* =========================================
   NPC DIALOGUE
   ========================================= */
.npc-dialogue-modal {
    position:fixed;
    inset:0;
    z-index:12000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:14px;
    background:rgba(16,10,7,.72);
}

.npc-dialogue-modal.is-open {
    display:flex;
}

.npc-dialogue-card {
    position:relative;
    width:min(100%,460px);
    max-height:min(78vh,620px);
    overflow:hidden;
    padding:22px 16px 16px;
    border:2px solid #8b6545;
    border-radius:10px;
    background:
        linear-gradient(
            180deg,
            rgba(247,226,178,.97) 0%,
            rgba(214,178,119,.97) 100%
        );
    box-shadow:
        inset 0 0 0 2px rgba(88,49,20,.18),
        0 12px 28px rgba(0,0,0,.55);
    color:#3f2817;
    font-family:Georgia,"Times New Roman",serif;
}

.npc-dialogue-speaker {
    padding:0 32px 8px 0;
    font-size:20px;
    line-height:1.2;
    font-weight:700;
    color:#5a3012;
}

.npc-dialogue-text {
    max-height:34vh;
    overflow-y:auto;
    padding:10px 12px;
    border:1px solid rgba(91,55,28,.28);
    border-radius:7px;
    background:rgba(255,247,224,.55);
    font-size:15px;
    line-height:1.5;
    white-space:pre-wrap;
}

.npc-dialogue-note {
    margin-top:8px;
    padding:7px 10px;
    border-left:3px solid #8b6545;
    background:rgba(255,247,224,.42);
    font-size:12px;
    line-height:1.35;
    color:#68472d;
}

.npc-dialogue-actions {
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-top:12px;
}

.npc-dialogue-choice {
    min-height:44px;
    padding:8px 12px;
    border:1px solid #8b6545;
    border-radius:7px;
    background:
        linear-gradient(
            180deg,
            #4b3422 0%,
            #2b1d14 52%,
            #17100c 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255,224,154,.16),
        0 2px 5px rgba(0,0,0,.3);
    color:#f6e3b6;
    font:700 13px/1.2 Georgia,"Times New Roman",serif;
    text-shadow:0 2px 2px #000;
    cursor:pointer;
}

.npc-dialogue-choice:active {
    transform:translateY(1px);
    filter:brightness(1.12);
}

@media (max-width:420px) {
    .npc-dialogue-modal {
        align-items:flex-end;
        padding:10px;
    }

    .npc-dialogue-card {
        width:100%;
        max-height:82vh;
        padding:20px 12px 12px;
    }

    .npc-dialogue-speaker {
        font-size:18px;
    }

    .npc-dialogue-text {
        max-height:38vh;
        font-size:14px;
    }
}

/* =========================================
   ТРЕНУВАЛЬНИЙ ПОЛІГОН
   ========================================= */

.training-location-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid #9e9e9e;
    border-radius: 7px;
    background: #f5f5f5;
}

.training-location-meta {
    font-size: 11px;
    color: #666;
}

.training-location-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

.training-location-button {
    padding: 6px 10px;
    border: 1px solid #ff9800;
    border-radius: 5px;
    background: #ff9800;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}

/* =========================================
   МОБИ НА ЛОКАЦІЇ — CSS NAMEPLATES
   ========================================= */

.location-mob-list {
    width:100%;
    min-width:0;
    margin-top:10px;
    padding:0 8px;
}

.location-mob-row {
    width:100%;
    max-width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:6px;
    min-height:78px;
    margin-bottom:5px;
    padding:0;
    background:none;
    border:0;
    border-radius:0;
    box-shadow:none;
}

.location-mob-row[data-mob-tier] {
    min-height:54px;
}

.location-mob-info {
    width:100%;
    min-width:0;
    min-height:0;
    padding:0 14% 0 27%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    text-align:center;
    cursor:pointer;
    color:#f2dfc0;
    font-family:Georgia,"Times New Roman",serif;
    line-height:1.1;
    font-weight:700;
    text-shadow:0 2px 3px #000;
}

.location-mob-row[data-mob-tier]
.location-mob-info {
    position:relative;
    min-height:50px;
    padding:7px 16px;
    overflow:hidden;
    border:1px solid #8b6545;
    border-radius:7px;
    box-shadow:
        inset 0 1px 0 rgba(255,224,154,.12),
        inset 0 -4px 8px rgba(0,0,0,.5),
        0 2px 6px rgba(0,0,0,.42);
}

.location-mob-row[data-mob-tier]
.location-mob-info::before {
    content:"";
    position:absolute;
    inset:3px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:4px;
    pointer-events:none;
}

.location-mob-row[data-mob-tier]
.location-mob-info::after {
    content:"";
    position:absolute;
    left:8px;
    right:8px;
    top:50%;
    height:1px;
    transform:translateY(-50%);
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.18) 0,
            rgba(255,255,255,0) 13%,
            rgba(255,255,255,0) 87%,
            rgba(255,255,255,.18) 100%
        );
    pointer-events:none;
}

.location-mob-row[data-mob-tier="normal"]
.location-mob-info {
    border-color:#557a94;
    background:
        linear-gradient(
            135deg,
            #173348 0%,
            #17191c 52%,
            #491a19 100%
        );
    box-shadow:
        inset 0 0 0 1px rgba(130,190,225,.18),
        inset 0 1px 0 rgba(180,225,248,.12),
        inset 0 -4px 8px rgba(0,0,0,.5),
        0 2px 6px rgba(0,0,0,.45);
}

.location-mob-row[data-mob-tier="elite"]
.location-mob-info {
    border-color:#9e4039;
    background:
        linear-gradient(
            135deg,
            #351010 0%,
            #171010 48%,
            #681d1b 100%
        );
    box-shadow:
        inset 0 0 0 1px rgba(224,112,94,.15),
        inset 0 1px 0 rgba(255,204,154,.1),
        inset 0 -4px 8px rgba(0,0,0,.52),
        0 2px 6px rgba(0,0,0,.46);
}

.location-mob-row[data-mob-tier="boss"]
.location-mob-info {
    border-color:#87446f;
    background:
        linear-gradient(
            135deg,
            #291126 0%,
            #130e15 48%,
            #591725 100%
        );
    box-shadow:
        inset 0 0 0 1px rgba(205,112,170,.15),
        inset 0 1px 0 rgba(255,218,168,.1),
        inset 0 -4px 8px rgba(0,0,0,.55),
        0 2px 7px rgba(0,0,0,.5);
}

.location-mob-label {
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
    font-size:12px;
    line-height:1.15;
    font-weight:700;
    color:#f6e3c2;
    text-shadow:
        0 2px 3px #000,
        0 0 4px rgba(0,0,0,.72);
}

.location-mob-row[data-mob-tier]
.location-mob-info:active {
    transform:translateY(1px);
    filter:brightness(1.1);
}

/* Модал характеристик */
#modal-bg {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#modal-content {
    background: #ffffff;
    width: 90%;
    max-width: 320px;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-title {
    margin-bottom: 15px;
    text-align: center;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    font-size: 15px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 5px;
}

.free-points-row {
    border: none;
    margin-top: 10px;
}

.stats-reset-row {
    margin-top: 10px;
}

.stats-reset-btn {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
}

.modal-divider {
    border: 0;
    border-top: 1px solid #eee;
    margin: 10px 0;
}

/* Вкладки розширених характеристик */
.ext-stats-title {
    font-size: 13px;
    font-weight: bold;
    color: #666;
    text-align: center;
    margin-bottom: 8px;
}

#ext-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    justify-content: center;
}

.ext-tab-btn {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
}



.ext-tab {
    margin-top: 5px;
}

#ext-defense {
    display: none;
}

.ext-tab .stat-row {
    border-bottom: 1px solid #f3f3f3;
}

/* Кнопка закриття модала */
.close-modal {
    width: 100%;
    padding: 10px;
    margin-top: 15px;
    font-size: 15px;
    cursor: pointer;
}

/* =========================================
   ІНФОРМАЦІЯ ПРО МОБА
   ========================================= */

.mob-info-modal-content {
    width:calc(100vw - 8px);
    max-width:calc(100vw - 8px);
    max-height:none;

    color:#4b321d;
}

/* =========================================
   ФІКСОВАНА КАРТКА МОБА
   PNG: 1229 × 1536
   ========================================= */

.trade-modal-content.mob-info-modal-content[
    data-mob-tier
] {
    position:relative;

    width:calc(100vw - 8px);
    max-width:calc(100vw - 8px);


    /*
       Пропорція точно така сама,
       як у PNG.
    */
    aspect-ratio:1229 / 1536;

    padding:0;
    overflow:hidden;
    border:0;
    border-radius:0;
    background-color:transparent;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    box-shadow:
        0 12px 30px
        rgba(0,0,0,.82);
}


/* =========================================
   NORMAL + ELITE — СИНЯ
   ========================================= */

.trade-modal-content.mob-info-modal-content[
    data-mob-tier="normal"
],
.trade-modal-content.mob-info-modal-content[
    data-mob-tier="elite"
] {
    background-image:
        url(
            "assets/ui/monsters/mob-panel-blue.png"
        );
}


/* =========================================
   MINIBOSS + BOSS — ЧЕРВОНА
   ========================================= */

.trade-modal-content.mob-info-modal-content[
    data-mob-tier="boss"
] {
    background-image:
        url(
            "assets/ui/monsters/mob-panel-red.png"
        );
}


/* =========================================
   НАЗВА МОБА
   Верхня темна плашка PNG
   ========================================= */

.mob-info-modal-content[data-mob-tier]
#mob-modal-header {
    position:absolute;

    top:6%;
    left:17%;
    right:17%;

    height:7.5%;

    margin:0;
    padding:0;

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

    z-index:5;

    overflow:hidden;

    text-align:center;

    color:#f6e3b6;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            12px,
            3.5vw,
            17px
        );

    line-height:1.08;

    text-shadow:
        0 2px 3px #000;
}


/* =========================================
   ПРОКРУЧУВАНИЙ ПЕРГАМЕНТ
   Рамка сама НЕ рухається
   ========================================= */

.mob-info-modal-content[data-mob-tier]
.mob-modal-scroll {
    position:absolute;

    top:18%;
    left:11.5%;
    right:11.5%;
    bottom:21%;

    padding:
    5px 1mm
    18px;

    overflow-x:hidden;
    overflow-y:auto;

    overscroll-behavior:contain;

    -webkit-overflow-scrolling:
        touch;

    color:#4b321d;

    background:transparent;

    z-index:3;

    scrollbar-width:thin;
}


/* Скролбар Android / Chromium */

.mob-info-modal-content[data-mob-tier]
.mob-modal-scroll::-webkit-scrollbar {
    width:4px;
}

.mob-info-modal-content[data-mob-tier]
.mob-modal-scroll::-webkit-scrollbar-thumb {
    background:
        rgba(94,61,31,.45);

    border-radius:4px;
}


/* =========================================
   ФОТОКАРТКА МОБА
   ========================================= */

.mob-modal-art-slot {
    display:none;
}

.mob-info-modal-content[data-mob-tier]
.mob-modal-art-slot {
    width:100%;
max-width:none;

    aspect-ratio:1 / 1;

    margin:
        4px auto
        15px;

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

    overflow:hidden;

    flex-shrink:0;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255,255,255,.18),
            rgba(73,48,25,.10)
        );

    border:
        2px solid
        #84633e;

    box-shadow:
        inset 0 0 12px
        rgba(70,43,19,.28);
}


/* Синя тема */

.mob-info-modal-content[
    data-mob-tier="normal"
]
.mob-modal-art-slot,
.mob-info-modal-content[
    data-mob-tier="elite"
]
.mob-modal-art-slot {
    border-color:#537fa0;
}


/* Червона тема */

.mob-info-modal-content[
    data-mob-tier="boss"
]
.mob-modal-art-slot {
    border-color:#9a443d;
}


/* =========================================
   РЕАЛЬНИЙ АРТ МОБА
   ========================================= */

.mob-modal-art-image {
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center;
}

.mob-modal-art-image[hidden] {
    display:none;
}


/* Поки картинки моба немає */

.mob-modal-art-placeholder {
    color:#72583d;

    font-size:9px;
    font-weight:700;

    letter-spacing:.12em;

    text-align:center;
}


/* =========================================
   ТЕКСТ ХАРАКТЕРИСТИК
   ========================================= */

.mob-info-modal-content[data-mob-tier]
.mob-info-modal-body {
    color:#4b321d;
}


/* =========================================
   КНОПКА ЗАКРИТИ
   Нижня темна плашка PNG
   ========================================= */

.mob-info-modal-content[data-mob-tier]
.mob-info-buttons-row {
    position:absolute;

    left:27%;
    right:27%;

    bottom:9%;

    height:5.5%;

    margin:0;

    display:flex;

    z-index:5;
}

.mob-info-modal-content[data-mob-tier]
.mob-info-close-btn {
    width:100%;
    height:100%;

    padding:0;

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

    border:
        1px solid
        rgba(214,169,64,.55);

    border-radius:5px;

    background:
        rgba(20,15,11,.65);

    color:#f1cd72;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:11px;
    font-weight:700;

    text-shadow:
        0 1px 2px #000;
}

.mob-info-modal-body {
    text-align: left;
}

.mob-info-row {
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.7;
}

/* =========================================
   ДРОП МОБА
   ========================================= */

.mob-drop-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top:
        1px solid #eeeeee;
}

.mob-drop-title {
    margin-bottom: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #555555;
}

.mob-drop-box {
    padding: 10px 12px;
    background: #fafafa;
    border:
        1px dashed #d0d0d0;
    border-radius: 10px;
}

.mob-drop-row {
    margin-bottom: 9px;
    font-size: 13px;
    line-height: 1.4;
}

.mob-drop-row:last-child {
    margin-bottom: 0;
}

.mob-drop-items {
    margin-top: 3px;
    padding-left: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: #666666;
}

.mob-info-buttons-row {
    display: flex;
    margin-top: 18px;
}

.mob-info-close-btn {
    width: 100%;
    flex: 1;
    padding: 10px;
    border-radius: 8px;
}

/* Інвентар */
#inv-modal-bg {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 100;
}

#inv-content {
    background: #ffffff;
    width: 95%;
    max-width: 360px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inv-main-title {
    text-align: center;
}

.inv-section-title {
    font-size: 14px;
    font-weight: bold;
    color: #555;
    text-align: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}

#equip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.equip-slot {
    background: #f8f9fa;
    border: 1px dashed #ccc;
    border-radius: 8px;
    height: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #777;
    text-align: center;
    padding: 2px;
}

.equip-slot.is-filled {
    background: #e8f5e9;
    border: 1px solid #4caf50;
    cursor: pointer;
}

.equip-slot.is-empty {
    background: #f9f9f9;
    border: 1px dashed #888;
    cursor: default;
}

.equip-item-name {
    font-weight: bold;
    color: #2e7d32;
}

.equip-item-hint {
    font-size: 9px;
    color: #666;
}

.equip-slot-label {
    color: #aaa;
    font-size: 11px;
}

.coins-bar {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: bold;
    font-size: 14px;
    color: #8d6e63;
    display: flex;
    justify-content: space-between;
}

/* =========================================
   ВКЛАДКИ ІНВЕНТАРЯ
   ========================================= */

#inventory-tabs {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 6px;
}

.inventory-tab-btn {
    padding: 8px 3px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}



#inventory-equipment-block {
    display:
        flex;
    flex-direction:
        column;
    gap:
        8px;
}

.inventory-storage-header {
    display:
        flex;
    align-items:
        center;
    gap:
        8px;
}

.inventory-storage-header
.inv-section-title {
    flex:
        1;
}

.inventory-expand-btn {
    flex-shrink: 0;
    padding: 6px 8px;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
}

.inventory-expand-btn:disabled {
    opacity:
        0.5;
    cursor:
        default;
}

#bag-grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 0.4px;
    width: 100%;
    justify-content: stretch;
}

.bag-slot {
    background: #f4f5f7;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1.1;
    word-break: break-word;
    text-align: center;
    padding: 2px;
    cursor: pointer;
}

/* =========================================
   ОСОБИСТА СКРИНЯ
   ========================================= */
.personal-storage-box {
    background: #fff;
    width: 95%;
    max-width: 360px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.personal-storage-box h3 {
    text-align: center;
}

.personal-storage-tabs {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 6px;
}

.personal-storage-tabs button {
    border: 1px solid #dcdfe6;
    background: #f4f5f7;
    border-radius: 7px;
    padding: 9px 4px;
    font-weight: bold;
    cursor: pointer;
}

.personal-storage-tabs button.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

.personal-storage-title {
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #666;
}

.personal-storage-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 6px;
}

.personal-storage-slot {
    position: relative;
    min-width: 0;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    background: #f4f5f7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px;
    text-align: center;
    word-break: break-word;
    cursor: pointer;
}

.personal-storage-slot.empty {
    cursor: default;
}

.personal-storage-name {
    font-size: 10px;
    font-weight: bold;
    line-height: 1.05;
}

.personal-storage-meta {
    margin-top: 2px;
    font-size: 8px;
    color: #777;
}

.personal-storage-count {
    position: absolute;
    right: 3px;
    bottom: 2px;
    font-size: 9px;
    font-weight: bold;
}

/* Магазин */
.fullscreen-modal-bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1000;
}

#shop-content {
    background: #ffffff;
    width: 95%;
    max-width: 360px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shop-grid-container {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.shop-slot {
    background: #f4f5f7;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    aspect-ratio: 1 / 1;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1.1;
    word-break: break-word;
    text-align: center;
    padding: 2px;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.shop-slot-art {
    display: block;
    width: 68%;
    height: 68%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    position: relative;
    z-index: 1;
    filter:
        drop-shadow(
            0 2px 2px
            rgba(0, 0, 0, .48)
        );
}

.shop-slot-name {
    position: absolute;
    top: 2px;
    left: 3px;
    right: 3px;
    z-index: 2;
    padding: 1px 2px;
    border-radius: 4px;
    background: rgba(20, 14, 9, .68);
    color: #f2dfb2;
    font-size: 7px;
    font-weight: 700;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.shop-slot-price,
.shop-slot-count {
    position: absolute;
    bottom: 2px;
    z-index: 2;
    min-width: 16px;
    padding: 1px 3px;
    border-radius: 4px;
    background: rgba(20, 14, 9, .82);
    color: #f2dfb2;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.15;
    pointer-events: none;
}

.shop-slot-price {
    left: 3px;
}

.shop-slot-count {
    right: 3px;
}

.shop-slot:hover {
    border-color: #999;
}

.shop-slot.empty {
    color: #bbb;
}

/* =========================================
   КУЗНЯ
   ========================================= */

.forge-help-text {
    text-align: center;
    color: #666;
    font-size: 13px;
    margin-bottom: 10px;
}

#forge-info {
    display: none;
    margin-top: 10px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 8px;
}

#forge-item-name {
    font-weight: bold;
}

#forge-item-stats {
    font-size: 13px;
    color: #555;
}

#forge-cost,
#forge-chance {
    margin: 8px 0;
}

.forge-slot-name {
    font-weight: bold;
    font-size: 10px;
}

.forge-slot-level {
    font-size: 9px;
    color: #888;
}

.forge-slot-rarity {
    font-size: 8px;
}

.forge-empty-state {
    grid-column: span 4;
    padding: 20px;
    text-align: center;
    color: #888;
}

.forge-empty-note {
    font-size: 12px;
}

.forge-upgrade-btn {
    background: #4caf50;
    color: #fff;
}

/* =======================================
   МОБІЛЬНИЙ МАГАЗИН НАВИКІВ
   ======================================= */
#skill-shop-content {
    background: #ffffff;
    width: 95%;
    max-width: 360px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 15px;
    padding: 15px;
    box-shadow:
        0 4px 15px
        rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Золото */
#skill-shop-gold-bar {
    background: #fff8e1;
    border:
        1px solid #ffe082;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: bold;
    font-size: 14px;
    color: #8d6e63;
    display: flex;
    justify-content: space-between;
}

/* 4 навики в ряд */
.skill-shop-grid {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
    gap: 6px;
    width: 100%;
}

/* Одна книга навика */
.skill-shop-slot {
    background: #f4f5f7;
    border:
        1px solid #dcdfe6;
    border-radius: 6px;
    aspect-ratio: 1 / 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px 2px;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
}

.skill-shop-slot:active {
    background: #e8e9ec;
}

.skill-shop-icon {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 3px;
}

.skill-shop-name {
    width: 100%;
    font-size: 10px;
    line-height: 1.05;
    font-weight: bold;
    overflow-wrap: anywhere;
}

.skill-shop-type {
    margin-top: 3px;
    font-size: 8px;
    line-height: 1;
    color: #777;
}

.skill-shop-price {
    margin-top: 3px;
    font-size: 9px;
    line-height: 1;
    color: #d98c00;
    font-weight: bold;
}

/* Коли магазин порожній */
.skill-shop-empty {
    grid-column: 1 / -1;
    padding: 20px;
    text-align: center;
    color: #888;
    font-size: 13px;
}

/* Модал бою (підготовка) */
.bm-modal-title {
    text-align: center;
    margin-bottom: 15px;
}

.bm-stats-summary {
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
}

.bm-drops-label {
    margin: 10px 0 5px 0;
    font-size: 13px;
    font-weight: bold;
    color: #555;
}

#bm-drops-list {
    background: #f8f9fa;
    padding: 8px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    border: 1px dashed #ccc;
}

.bm-buttons-row {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.bm-cancel-btn,




.bm-fight-btn {
    background: #ff5252;
    color: #fff;
}

/* Торговий модал */
.trade-modal-bg {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.trade-modal-content {
    width: 85%;
    max-width: 290px;
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
}

.tm-icon-style {
    font-size: 36px;
    margin-bottom: 8px;
}

.tm-title-style {
    margin-bottom: 10px;
    font-size: 16px;
}

.tm-question-style {
    font-size: 14px;
    color: #555;
    margin-bottom: 18px;
}

/* =========================================
   ІНФОРМАЦІЯ ПРО ПРЕДМЕТ
   ======================================== */

.item-info-body {
    text-align: left;
    line-height: 1.45;
}

.item-info-meta {
    text-align: center;
    margin-bottom: 10px;
}

.item-info-separator {
    margin: 0 5px;
}

.item-stats-block {
    margin-top: 14px;
}

.item-stats-block-title {
    font-weight: bold;
    margin-bottom: 7px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ddd;
}

.item-stat-row,
.item-lost-stat-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 5px 0;
}

.item-stat-row {
    align-items: center;
}

.item-stat-value {
    white-space: nowrap;
}

.item-stat-difference {
    margin-left: 6px;
    font-size: 12px;
}

.item-stat-difference.is-equal {
    color: #888;
}

.item-stat-difference.is-positive {
    color: #2e7d32;
    font-weight: bold;
}

.item-stat-difference.is-negative {
    color: #c62828;
    font-weight: bold;
}

.item-lost-stats {
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px dashed #ccc;
}

.item-lost-stats-title {
    font-size: 12px;
    font-weight: bold;
    color: #c62828;
    margin-bottom: 5px;
}

.item-comparison-box,
.item-description-box {
    margin-top: 12px;
    background: #f5f5f5;
    border-radius: 7px;
}

.item-comparison-box {
    padding: 7px;
    font-size: 12px;
}

.item-description-box {
    padding: 9px;
    font-size: 13px;
    line-height: 1.4;
}

.item-price-box {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
    text-align: center;
    font-size: 15px;
}

/* =========================================
   ПОКУПКА НАВИКА
   ========================================= */

.skill-buy-body {
    text-align: left;
    line-height: 1.5;
}

.skill-buy-type {
    margin-bottom: 8px;
    color: #555;
}

.skill-buy-description {
    margin-bottom: 10px;
}

.skill-buy-mastery {
    margin-bottom: 6px;
    color: #666;
}

.skill-buy-price {
    padding-top: 8px;
    border-top: 1px solid #eee;
    font-weight: bold;
    color: #d98c00;
}

.trade-buttons-row {
    display: flex;
    gap: 10px;
}

.trade-no-btn,
.trade-yes-btn {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: none;
    font-weight: bold;
    cursor: pointer;
}

.trade-yes-btn {
    background: #4caf50;
    color: #fff;
}

/* Бойова арена */
#battle-arena {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; bottom: 140px;
    background: #f4f5f7;
    z-index: 900;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
    overflow-y: auto;
}

.arena-top-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #fff;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.arena-fighter-col,
.arena-mob-col {
    width: 45%;
}

.arena-mob-col {
    text-align: right;
}

.arena-fighter-header,
.arena-mob-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.arena-mob-header {
    justify-content: flex-end;
}

.arena-fighter-emoji {
    font-size: 26px;
}

.arena-fighter-name {
    font-weight: bold;
    font-size: 13px;
    color: #222;
}

.arena-hp-container {
    background: #e0e0e0;
    border-radius: 6px;
    height: 10px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 3px;
}

.arena-hp-fill-red,
.arena-hp-fill-orange {
    height: 100%;
    width: 100%;
    transition: width 0.3s;
}

.arena-hp-fill-red {
    background: #ff5252;
}

.arena-hp-fill-orange {
    background: #ffa000;
    float: right;
}

.arena-hp-text {
    font-size: 11px;
    color: #555;
    margin-bottom: 4px;
}

.arena-mp-container {
    background: #e0e0e0;
    border-radius: 6px;
    height: 6px;
    width: 100%;
    overflow: hidden;
}

.arena-mp-fill {
    background: #448aff;
    height: 100%;
    width: 100%;
    transition: width 0.3s;
}
/* =========================================
   ЕФЕКТИ В БОЮ
   ======================================= */
.arena-effects-list {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    width: 100%;
    margin-top: 5px;
}

.arena-fighter-col .arena-effects-list {
    justify-content: flex-start;
}

.arena-mob-col .arena-effects-list {
    justify-content: flex-end;
}

.arena-effect-chip {
    max-width: 100%;
    padding: 2px 5px;
    border-radius: 7px;
    border: 1px solid #d6d6d6;
    background: #f5f5f5;
    color: #444;
    font-size: 8px;
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
}

.arena-effect-chip.positive {
    background: #edf7ee;
    border-color: #b8d8bb;
    color: #35733b;
}

.arena-effect-chip.negative {
    background: #fff0f0;
    border-color: #e0b4b4;
    color: #9a3838;
}

/* =========================================
   GLOBAL COOLDOWN
   ======================================= */
.cd-overlay.global-cooldown-overlay {
    background: rgba(70, 95, 135, 0.78);
    color: #fff;
}

/* =========================================
   СТАНИ БОЙОВИХ НАВИКІВ
   ======================================= */
.skill-slot-subtext {
    font-size: 8px;
    line-height: 1;
    font-weight: 600;
    color: #aaa;
}

.action-slot.skill-unavailable {
    opacity: 0.42;
    filter: grayscale(0.8);
}

.action-slot.skill-unavailable
.skill-slot-subtext {
    color: #c44;
    font-weight: 700;
}

.action-slot.skill-passive {
    opacity: 0.78;
}

.arena-effect-chip.neutral {
    background: #eef3f8;
    border-color: #bccbd8;
    color: #496273;
}
.arena-vs-text {
    font-weight: bold;
    color: #bbb;
    align-self: center;
    font-size: 14px;
}

/* =========================================
   9.8.9 — КОМАНДИ "СТІНКА НА СТІНКУ"
   ========================================= */
#battle-target-selector {
    display: none;
    margin: 8px 0;
    padding: 7px;
    border: 1px solid #bbb;
    border-radius: 9px;
    background: #fafafa;
}
.battle-target-selector-title {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 7px;
}
#battle-target-buttons {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 7px;
    width: 100%;
    align-items: start;
}
.battle-team-column {
    min-width: 0;
    border-radius: 7px;
    padding: 5px;
}
.battle-team-column.allies {
    background: #f1f7ff;
    border: 1px solid #bbdefb;
}
.battle-team-column.enemies {
    background: #fff5f5;
    border: 1px solid #ffcdd2;
}
.battle-team-title {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: bold;
}
.battle-team-title span {
    flex-shrink: 0;
    color: #777;
}
.battle-team-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.battle-team-unit {
    width: 100%;
    min-width: 0;
    padding: 5px;
    border-radius: 6px;
    background: #fff;
    text-align: left;
}

button.battle-team-unit.ally {
    border: 1px solid #90caf9;
    color: #333;
    font: inherit;
    cursor: pointer;
}
button.battle-team-unit.ally.is-ally-selected {
    border: 2px solid #43a047;
    background: #e8f5e9;
}
button.battle-team-unit.enemy {
    border: 1px solid #ef9a9a;
    color: #333;
    font: inherit;
    cursor: pointer;
}
button.battle-team-unit.enemy.is-selected {
    border: 2px solid #ff9800;
    background: #fff3e0;
}
.battle-team-unit-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    line-height: 1.2;
    font-weight: bold;
}
.battle-team-unit-hp {
    margin-top: 2px;
    font-size: 9px;
    color: #666;
}
.battle-team-hp-track {
    width: 100%;
    height: 5px;
    margin-top: 2px;
    overflow: hidden;
    border-radius: 4px;
    background: #ddd;
}
.battle-team-hp-fill {
    height: 100%;
    background: #4caf50;
    transition: width .2s;
}
.battle-team-column.enemies .battle-team-hp-fill {
    background: #ef5350;
}

/* =========================================
   СТАТИСТИКА ТРЕНУВАЛЬНОГО БОЮ
   ========================================= */

#training-stats-panel {
    display: none;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #9e9e9e;
    border-radius: 8px;
    background: #f5f5f5;
    text-align: left;
    font-size: 12px;
    line-height: 1.7;
}

.training-stats-title {
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px;
}

.arena-center-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #666;
    padding: 10px;
}

.arena-swords-icon {
    font-size: 42px;
    margin-bottom: 8px;
}

.arena-status-text {
    font-size: 14px;
    font-weight: 500;
    color: #444;
}

.arena-escape-row {
    text-align: center;
    margin-top: 10px;
}

.arena-escape-btn {
    font-size: 13px;
    cursor: pointer;
}

/* Панель дій у бою */
#battle-action-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.battle-potions-row {
    display: flex;
    gap: 10px;
}

.battle-skills-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;

    width: 100%;
    max-width: 300px;
}


#skill-slot-6,
#skill-slot-7,
#skill-slot-8,
#skill-slot-9 {
    display: none;
}

.action-slot {
    display: flex;
    align-items: center;
    justify-content: center;
}

.small-slot {
    width: 40px;
    height: 40px;
    border: 1px dashed #666;
    border-radius: 6px;
    cursor: pointer;
    background: #222;
    color: #fff;
    font-size: 18px;
}

.main-slot {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #333;
    color: #fff;
    border: 2px solid #444;
    position: relative;
}

.main-slot.empty {
    background: #222;
    color: #777;
    border-style: dashed;
}

/* Модал навичок */
.modal-bg {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-window {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    position: relative;
}

/* =========================================
   МОДАЛ КНИГИ НАВИЧОК
   ====================================== */

.skills-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.skills-modal-title {
    margin: 0;
    font-size: 20px;
}

.skills-modal-x-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.skills-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    color: #666;
    padding: 20px 0;
}

.skills-empty-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.skills-empty-note {
    font-size: 13px;
}

.skills-modal-footer {
    margin-top: 15px;
    text-align: center;
}

.skills-modal-close-btn {
    background: #333;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
}

/* Модал моба */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: #2b2b2b;
    color: #f1f1f1;
    padding: 20px;
    border-radius: 12px;
    width: 85%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    border: 1px solid #444;
}

.modal-header {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

.modal-body {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: left;
}

.modal-close-btn {
    width: 100%;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}



/* Іконка предмета */
.item-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 5px;
}

/* Слоти екіпіровки (для майбутнього використання) */
.eq-slot {
    border: 1px dashed #888;
    padding: 8px;
    text-align: center;
    min-height: 40px;
    background: #f9f9f9;
    border-radius: 6px;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}

.eq-slot:hover {
    border-color: #4caf50;
}
/* Стилі для кулдауну на кнопках */
.main-slot, .small-slot {
    position: relative;
    overflow: hidden;
}

.main-slot.on-cooldown, .small-slot.on-cooldown {
    cursor: not-allowed;
    opacity: 0.8;
}

.cd-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    pointer-events: none;
}

/* =========================================
   ВМІСТ КНИГИ НАВИЧОК
   ====================================== */
.skills-book-section-title {
    margin: 12px 0 8px;
    font-weight: bold;
    font-size: 14px;
    text-align: left;
}

/* ---------- БОЙОВІ СЛОТИ ---------- */
.book-equipped-skills {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 16px;
}

.book-skill-slot {
    position: relative;
    min-width: 0;
    min-height: 82px;
    padding: 7px 3px;
    border: 2px solid #8b6a3e;
    border-radius: 7px;
    background: #2f2923;
    text-align: center;
}

.book-skill-slot.empty {
    opacity: 0.55;
}

.book-skill-slot-number {
    position: absolute;
    top: 3px;
    left: 5px;
    font-size: 9px;
    color: #aaa;
}

.book-skill-slot-icon {
    margin-top: 7px;
    font-size: 23px;
    line-height: 1;
}

.book-skill-slot-name {
    margin-top: 5px;
    font-size: 9px;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.book-skill-slot-mastery {
    margin-top: 3px;
    font-size: 9px;
    color: #d7b96c;
}

.book-skill-remove {
    position: absolute;
    top: 1px;
    right: 2px;
    width: 19px;
    height: 19px;
    padding: 0;
    border: none;
    background: transparent;
    color: #c9c9c9;
    font-size: 16px;
}

/* ---------- СПИСОК НАВИКІВ ---------- */
.learned-skills-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.learned-skill-card {
    padding: 10px;
    border: 1px solid #806844;
    border-radius: 8px;
    background: #312a23;
    text-align: left;
}

.learned-skill-header {
    display: flex;
    align-items: center;
    gap: 9px;
}

.learned-skill-icon {
    min-width: 36px;
    font-size: 29px;
    text-align: center;
}

.learned-skill-title-wrap {
    min-width: 0;
    flex: 1;
}

.learned-skill-name {
    font-weight: bold;
    font-size: 14px;
}

.learned-skill-rank {
    margin-top: 2px;
    font-size: 10px;
    color: #c4a86d;
}

.learned-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
    font-size: 10px;
}

.learned-skill-tags span {
    padding: 3px 6px;
    border: 1px solid #665743;
    border-radius: 5px;
}

.learned-skill-costs {
    display: flex;
    gap: 12px;
    margin-top: 7px;
    font-size: 10px;
}

.learned-skill-description {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid #554a3c;
    font-size: 11px;
    line-height: 1.35;
}

/* ---------- ВИБІР СЛОТА ---------- */
.skill-card-slots-title {
    margin-top: 9px;
    font-size: 10px;
    color: #aaa;
}

.skill-card-slot-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 5px;
}

.skill-card-slot-btn {
    padding: 6px 0;
    border: 1px solid #806844;
    border-radius: 5px;
    background: #44382c;
    color: #eee;
    font-weight: bold;
}

.skill-card-slot-btn.active {
    border-color: #d6b75e;
    background: #6b552c;
}

.skill-passive-info {
    margin-top: 9px;
    padding: 6px;
    border-radius: 5px;
    background: rgba(255,255,255,0.05);
    font-size: 10px;
    text-align: center;
}

.skills-book-empty {
    padding: 24px 10px;
    text-align: center;
    color: #999;
    font-size: 12px;
    line-height: 1.4;
}

/* =========================================
   ІНФОРМАЦІЯ ПРО НАВИК
   ========================================= */

.skill-auto-mechanics {
    line-height: 1.55;
}

.skill-auto-mechanics.has-flavor {
    margin-top: 8px;
}

.skill-standard-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skill-standard-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.35;
}

.skill-standard-meta-row {
    min-height: 1.35em;
}

.skill-standard-flavor {
    padding-top: 7px;
    border-top: 1px solid #554a3c;
    font-style: italic;
    line-height: 1.4;
}

.skill-standard-mechanics {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 7px;
    border-top: 1px solid #554a3c;
    line-height: 1.45;
}

.skill-standard-mechanic {
    display: block;
}

.skills-book-slot-count {
    float: right;
    font-size: 11px;
    color: #999;
}

.skill-book-info-body {
    text-align: left;
    line-height: 1.6;
}

.skill-book-info-icon {
    text-align: center;
    font-size: 30px;
    margin-bottom: 8px;
}

.skill-book-info-description {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #ddd;
}

.skill-book-info-message {
    margin-top: 12px;
    text-align: center;
    font-weight: bold;
}

.skill-book-info-message.is-upgrade {
    color: #8a5a00;
}

.skill-book-info-message.is-max {
    color: #2e7d32;
}

.skill-book-info-max-note {
    margin-top: 5px;
    text-align: center;
    font-size: 11px;
    color: #777;
}

/* =========================================
   МАЙСТЕРНЯ
   ========================================= */
#workshop-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    align-items: center;
    justify-content: center;
    z-index: 1200;
}
#workshop-content {
    width: 95%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    padding: 14px;
}
#workshop-tabs {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6px;
    margin: 12px 0;
}
.workshop-tab-btn {
    padding: 9px 4px;
    font-size: 12px;
    font-weight: bold;
}

#workshop-summary {
    padding: 7px;
    margin-bottom: 8px;
    text-align: center;
    font-size: 12px;
    color: #666;
}
#workshop-recipe-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.workshop-recipe-card {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 9px;
    background: #fafafa;
}
.workshop-recipe-card.locked {
    opacity: .65;
}
.workshop-recipe-title {
    font-weight: bold;
    font-size: 14px;
}
.workshop-recipe-tier {
    margin: 3px 0 7px;
    font-size: 11px;
    color: #777;
}
.workshop-ingredients {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.workshop-ingredient {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 3px 0;
}
.workshop-ingredient.enough {
    color: #2e7d32;
}
.workshop-ingredient.missing {
    color: #c62828;
}
.workshop-locked-text {
    font-size: 12px;
    color: #777;
}
.workshop-craft-btn {
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    border: 0;
    border-radius: 7px;
    background: #4caf50;
    color: #fff;
    font-weight: bold;
}
.workshop-craft-btn:disabled {
    background: #aaa;
}
.workshop-empty {
    padding: 20px;
    text-align: center;
    color: #777;
}

.workshop-recipe-desc {
    margin-top: 3px;
    font-size: 12px;
    color: #555;
    line-height: 1.3;
}
.workshop-ingredient span {
    padding-right: 8px;
}

/* =========================================
   9.8.7 — БОЙОВІ СУВОЇ
   ========================================= */
.battle-scroll-wrap {
    position: relative;
}
.battle-scroll-slot {
    width: 92px;
    padding: 0 6px;
    white-space: nowrap;
    font-size: 11px;
}
#battle-scroll-menu {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 46px;
    transform: translateX(-50%);
    width: min(320px, 88vw);
    max-height: 190px;
    overflow-y: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 9px;
    box-shadow: 0 3px 12px rgba(0,0,0,.25);
    z-index: 1500;
}
#battle-scroll-menu.open {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.battle-scroll-menu-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f7f7f7;
    font-size: 11px;
    text-align: left;
    cursor: pointer;
}
.battle-scroll-menu-item span {
    flex: 1;
}
.battle-scroll-menu-item b {
    flex-shrink: 0;
}
.battle-scroll-empty {
    padding: 10px;
    color: #777;
    font-size: 12px;
    text-align: center;
}

/* =========================================
   КОМПАКТНА КНИГА НАВИЧОК
   ========================================= 

/* Саме вікно більше не скролиться цілком. */
#skills-modal-bg .modal-window {
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    overflow: hidden;
}

/* Скролиться тільки середня частина. */
#skills-list-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding:
        0 2px 10px;
}

/* =========================================
   БОЙОВІ СЛОТИ ЗАВЖДИ ЗВЕРХУ
   ========================================= */

#skills-list-container
.book-equipped-skills {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #ffffff;
    padding:
        8px 0 10px;
    margin-bottom: 12px;
}

/* =========================================
   ПО ДВА НАВИКА В РЯД
   ========================================= */

#skills-list-container
.learned-skills-grid {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}

/* Карточка у списку компактна. */
#skills-list-container
.learned-skills-grid
> .learned-skill-card {
    cursor: pointer;
    min-width: 0;
    padding: 8px;
}

/*
У самому списку показуємо:
іконку + назву + рівень.

Повний опис НЕ видаляється з DOM.
Він відкриватиметься в окремому вікні.
*/
#skills-list-container
.learned-skills-grid
> .learned-skill-card
> :not(.learned-skill-header) {
    display: none;
}

#skills-list-container
.learned-skill-name {
    font-size: 12px;
}

#skills-list-container
.learned-skill-icon {
    min-width: 28px;
    font-size: 22px;
}

/* =========================================
   ОКРЕМЕ ВІКНО ПОВНОГО ОПИСУ
   ========================================= */

#skill-detail-bg {
    z-index: 1200;
}

.skill-detail-window {
    max-height: 80vh;
    overflow-y: auto;
}

.skill-detail-body
.learned-skill-card {
    padding: 10px;
    border:
        1px solid #806844;
    border-radius: 8px;
    background: #312a23;
    color: #eeeeee;
    text-align: left;
}

/* =========================================
   DUNGEON SEALS
   ========================================= */
.dungeon-modal-content {
    width: 90%;
    max-width: 340px;
    max-height: 85vh;
    overflow-y: auto;
    text-align: left;
}

.dungeon-modal-title {
    text-align: center;
    margin-bottom: 12px;
}

.dungeon-seal-group {
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fafafa;
}

.dungeon-seal-title {
    font-weight: bold;
    margin-bottom: 7px;
}

.dungeon-seal-row,
.dungeon-entry-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.dungeon-seal-row:last-child,
.dungeon-entry-row:last-child {
    border-bottom: none;
}

.dungeon-entry-btn {
    padding: 7px 12px;
    border: none;
    border-radius: 6px;
    background: #4caf50;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

.dungeon-entry-meta {
    margin-top: 2px;
    font-size: 12px;
    color: #777;
}

.dungeon-entry-section-title {
    margin: 14px 0 6px;
    font-weight: bold;
}

.dungeon-empty {
    padding: 12px;
    text-align: center;
    color: #777;
}

/* =========================================
   ОСНОВНІ ЕКРАНИ ГРИ
   ЕТАП 1
   ========================================= */

body {
    padding-bottom: 215px;
}

.main-screen {
    display: none;
}

.main-screen.active {
    display: block;
}


/* =========================================
   ТИМЧАСОВИЙ ВМІСТ ЕКРАНІВ
   ========================================= */

.main-screen-placeholder {
    margin: 0 10px 15px;
    min-height: 180px;
    padding: 24px 15px;

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

    text-align: center;

    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;

    box-shadow:
        0 2px 5px
        rgba(0, 0, 0, 0.06);
}

.main-screen-placeholder-icon {
    margin-bottom: 8px;
    font-size: 34px;
}

.main-screen-placeholder h2 {
    margin-bottom: 6px;
    font-size: 18px;
}

.main-screen-placeholder p {
    margin-bottom: 15px;
    max-width: 260px;

    color: #777;
    font-size: 12px;
    line-height: 1.45;
}

.main-screen-legacy-btn {
    padding: 9px 14px;

    border:
        1px solid #cccccc;
    border-radius: 8px;

    background: #f4f5f7;
    color: #333333;

    font-size: 12px;
    font-weight: bold;

    cursor: pointer;
}


/* =========================================
   НИЖНЯ НАВІГАЦІЯ — PNG UI
   ========================================= */
#main-bottom-nav {
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:62px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    background-image:
        url("assets/ui/wood-texture.svg"),
        linear-gradient(180deg,#3a2417,#150d08);
    background-repeat:repeat,no-repeat;
    border-top:1px solid var(--fantasy-gold);
    box-shadow:0 -4px 12px rgba(0,0,0,.72);
    z-index:60;
}

.main-bottom-nav-btn {
    min-width:0;
    height:62px;
    padding:5px 2px 3px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    border:0;
    background-color:transparent;
    background-image:url("assets/ui/frames/nav-frame.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    color:#d1b77f;
    font-family:Georgia,"Times New Roman",serif;
    font-size:9px;
    font-weight:bold;
    text-shadow:0 1px 2px #000;
    cursor:pointer;
    transition:filter .12s ease,transform .08s ease;
}

.main-bottom-nav-btn.active {
    color:#ffe6a1;
    background-image:url("assets/ui/frames/nav-frame-active.png");
}

.main-bottom-nav-icon {
    width:34px;
    height:29px;
    transform:scale(1.1);
    object-fit:contain;
    flex-shrink:0;
    pointer-events:none;
    filter:drop-shadow(0 2px 2px #000);
}

.main-bottom-nav-btn.active .main-bottom-nav-icon {
    filter:
        drop-shadow(0 0 4px rgba(62,190,255,.8))
        drop-shadow(0 2px 2px #000);
}

.main-bottom-nav-btn:active {
    transform:translateY(1px);
    filter:brightness(1.15);
}

.main-bottom-nav-btn > span {
    line-height:1;
    white-space:nowrap;
}

/* =========================================
   ОСНОВНІ ЕКРАНИ — ЕТАП 2
   ========================================= */

/* Характеристики */

#screen-character #modal-content {
    width: calc(100% - 20px);
    max-width: none;
    max-height: none;

    margin: 0 10px 15px;
    padding: 15px;

    overflow: visible;
    border-radius: 12px;
}


/* Інвентар */

#screen-inventory #inv-content {
    width: calc(100% - 20px);
    max-width: none;
    max-height: none;

    margin: 0 10px 15px;

    overflow: visible;
}


/* Навики */

#screen-skills > .modal-window {
    width: calc(100% - 20px);
    max-width: none;

    margin: 0 10px 15px;

    display: flex;
    flex-direction: column;

    max-height:
        calc(100vh - 225px);

    overflow: hidden;
}

#screen-skills
#skills-list-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}


/* Старі кнопки "Закрити"
   для основних екранів уже не потрібні */

#screen-character
#modal-content
> .close-modal,

#screen-inventory
#inv-content
> .close-modal,

#screen-skills
.skills-modal-footer {
    display: none;
}

/* =========================================
   ЖУРНАЛ — FANTASY UI 2.0
   ========================================= */

body {
    padding-bottom:104px;
}

body.game-log-open {
    overflow:hidden;
}

#game-log-shell {
    position:fixed;
    left:0;
    bottom:62px;
    width:100%;
    height:38px;
    display:flex;
    flex-direction:column;
    background:
        url("assets/ui/wood-texture.svg"),
        linear-gradient(180deg,#3a2417 0%,#21140d 100%);
    background-repeat:repeat,no-repeat;
    border:4px solid transparent;
    border-image:url("assets/ui/frame-bronze.svg") 24 / 4px / 0 stretch;
    box-shadow:
        inset 0 1px 0 rgba(255,226,154,.10),
        0 -3px 10px rgba(0,0,0,.65);
    z-index:55;
    transition:height .2s ease;
    overscroll-behavior:contain;
}

#game-log-toggle {
    width:100%;
    min-height:30px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:2px 10px;
    border:0;
    background:linear-gradient(180deg,#4b301c,#26170e);
    color:#f1cd72;
    font-family:Georgia,"Times New Roman",serif;
    font-size:12px;
    font-weight:700;
    text-shadow:0 1px 2px #000;
    cursor:pointer;
}

#game-log-toggle:active {
    filter:brightness(1.15);
}

#game-log-toggle-icon {
    color:#ffe29a;
    font-size:10px;
}

#game-log-menu {
    display:none;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    padding:5px 6px;
    flex-shrink:0;
    background:rgba(25,16,10,.94);
    border-top:1px solid #754a20;
    border-bottom:1px solid #754a20;
}

.game-log-channel-btn {
    min-width:0;
    padding:6px 2px;
    border:1px solid #76502b;
    border-radius:5px;
    background:#332218;
    color:#cdb98f;
    font-family:inherit;
    font-size:10px;
    font-weight:700;
}

.game-log-channel-btn.active {
    border-color:var(--fantasy-gold);
    color:var(--fantasy-gold-light);
    background:#654521;
}

#game-log-shell #game-log {
    display:none;
    position:static;
    width:100%;
    min-height:0;
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:7px 10px 12px;
    border:0;
    color:#4b321d;
    background-image:
        url("assets/ui/paper-texture.svg"),
        linear-gradient(180deg,#ead4a1,#c79f60);
    background-repeat:repeat,no-repeat;
    font-family:Georgia,"Times New Roman",serif;
    font-size:11px;
    line-height:17px;
}

#game-log-shell.expanded {
    height:46vh;
    max-height:380px;
}

#game-log-shell.expanded #game-log-menu {
    display:grid;
}

#game-log-shell.expanded #game-log {
    display:block;
}

#game-log .log-msg[hidden] {
    display:none !important;
}

/* =========================================
   MYGAME — FANTASY UI
   ЕТАП 5.1
   БАЗОВА ВІЗУАЛЬНА СИСТЕМА
   ========================================= */

:root {
    --fantasy-bg-dark:#120e0b;
    --fantasy-bg-wood:#2a190f;
    --fantasy-bg-wood-light:#56351d;
    --fantasy-bronze-dark:#7a4b1f;
    --fantasy-bronze:#b67a2e;
    --fantasy-gold:#e0b44e;
    --fantasy-gold-light:#ffe09a;
    --fantasy-paper:#d8bc82;
    --fantasy-paper-light:#f0d9a5;
    --fantasy-paper-dark:#b98c4e;
    --fantasy-text-dark:#281b10;
    --fantasy-text-light:#f1dfbb;
    --fantasy-text-muted:#b8a17b;
    --fantasy-red:#8d2b28;
    --fantasy-red-dark:#511715;
    --fantasy-green:#4f6f3b;
    --fantasy-blue:#247fb0;
    --fantasy-radius:8px;
    --fantasy-border:2px solid var(--fantasy-bronze);
}


/* =========================================
   МАЙБУТНІ УНІВЕРСАЛЬНІ КОМПОНЕНТИ
   ========================================= */

.fantasy-panel {
    position: relative;

    color:
        var(--fantasy-text-dark);

    background:
        linear-gradient(
            145deg,
            var(--fantasy-paper-light),
            var(--fantasy-paper)
        );

    border:
        var(--fantasy-border);

    border-radius:
        var(--fantasy-radius);

    box-shadow:
        inset 0 0 0 2px
            rgba(74, 43, 18, 0.35),

        0 4px 12px
            rgba(0, 0, 0, 0.45);
}


.fantasy-btn {
    border:
        1px solid
        var(--fantasy-gold);

    border-radius: 6px;

    background:
        linear-gradient(
            180deg,
            #604225,
            #302016
        );

    color:
        var(--fantasy-text-light);

    font-weight: bold;

    box-shadow:
        inset 0 1px 0
            rgba(255, 255, 255, 0.12);

    cursor: pointer;
}


.fantasy-tab {
    border:
        1px solid
        var(--fantasy-bronze);

    background:
        #38261a;

    color:
        var(--fantasy-text-muted);
}


.fantasy-tab.active {
    background:
        linear-gradient(
            180deg,
            #75522c,
            #4b321e
        );

    color:
        var(--fantasy-gold-light);

    border-color:
        var(--fantasy-gold);
}


.fantasy-title {
    color:
        var(--fantasy-text-dark);

    font-weight: bold;

    text-align: center;

    letter-spacing: 0.04em;
}


.fantasy-slot {
    background:
        linear-gradient(
            145deg,
            #30261e,
            #15110e
        );

    border:
        2px solid
        var(--fantasy-bronze-dark);

    border-radius: 7px;

    box-shadow:
        inset 0 0 7px
            rgba(0, 0, 0, 0.7);
}


/* =========================================
   ОСНОВНИЙ ФОН ГРИ
   ========================================= */

html {
    min-height: 100%;

    background:
        var(--fantasy-bg-dark);
}


body {
    min-height: 100vh;

    color:
        var(--fantasy-text-light);

    background:

        radial-gradient(
            circle at 50% 15%,
            rgba(135, 86, 38, 0.16),
            transparent 38%
        ),

        linear-gradient(
            180deg,
            #241710 0%,
            #16100c 55%,
            #100c09 100%
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;
}


/* =========================================
   ОСНОВНІ ЕКРАНИ
   ========================================= */

.main-screen {
    position: relative;

    min-height:
        calc(100vh - 165px);

    padding:
        10px 0 16px;
}



/* =========================================
   ПЕРГАМЕНТНІ ОСНОВНІ ПАНЕЛІ
   ========================================= */

#location-card,

#screen-character
#modal-content,

#screen-inventory
#inv-content,

#screen-skills
> .modal-window,

.main-screen-placeholder {

    position: relative;

    color:
        var(--fantasy-text-dark);

    background:

        linear-gradient(
            rgba(255,255,255,0.04),
            rgba(83,50,20,0.07)
        ),

        linear-gradient(
            145deg,
            var(--fantasy-paper-light),
            var(--fantasy-paper)
        );

    border:
        var(--fantasy-border);

    border-radius:
        var(--fantasy-radius);

    box-shadow:

        inset 0 0 0 2px
        rgba(88, 54, 24, 0.28),

        inset 0 0 18px
        rgba(95, 59, 25, 0.16),

        0 5px 15px
        rgba(0, 0, 0, 0.55);
}


/* =========================================
   ЗАГОЛОВКИ
   ========================================= */

#location-title,
.modal-title,
.inv-main-title,
.skills-modal-title {

    color:
        #382718;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: bold;

    text-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.35);
}


#location-title {
    color:
        #4b2f17;

    letter-spacing:
        0.03em;
}


/* =========================================
   РЯДКИ ХАРАКТЕРИСТИК
   ========================================= */

#screen-character
.stat-row {

    padding:
        6px 7px;

    margin:
        2px 0;

    border-bottom:
        1px solid
        rgba(92, 59, 27, 0.2);
}


#screen-character
.stat-row b {
    color:
        #54351b;
}

/* Іконки характеристик.
   Primary: 22px, extended: 20px.
   Це достатньо крупно для читання на телефоні,
   але не роздуває рядки характеристик. */
#screen-character
.stat-label-with-icon {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
}

#screen-character
.stat-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

#screen-character
.stat-icon.primary-stat-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
}

#screen-character
.primary-stat-gear-bonus {
    margin-left: 2px;
    color: #2f7b32;
    font-weight: 800;
}

#screen-character
.primary-stat-gear-bonus.is-zero {
    color: #8b765f;
    font-weight: 600;
}

#screen-character
.stat-label-with-icon > span {
    min-width: 0;
}

/* =========================================
   СПІЛЬНІ ІКОНКИ ХАРАКТЕРИСТИК
   ========================================= */

.stat-inline-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-block;
    object-fit: contain;
    vertical-align: middle;
    pointer-events: none;
}

.stat-label-inline,
.item-stat-name,
.item-context-stat-label,
.mob-info-stat-label,
.forge-stat-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.item-info-modal-content
.stat-inline-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
}

.item-info-modal-content
.item-stat-name {
    align-items: center;
}

.item-context-row {
    align-items: center;
}

.mob-info-modal-content
.stat-inline-icon {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
}

.mob-info-stat-label {
    vertical-align: middle;
}

.forge-stat-inline {
    margin-right: 8px;
}

#forge-info
.stat-inline-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
}



.ext-stats-title,
.inv-section-title {

    color:
        #49301c;

    font-weight: bold;

    border-bottom:
        1px solid
        var(--fantasy-bronze);

    padding-bottom: 5px;
}


/* =========================================
   ВКЛАДКИ
   ========================================= */







/* =========================================
   СЛОТИ ЕКІПІРОВКИ / ІНВЕНТАРЯ
   ========================================= */

.equip-slot,
.inventory-slot,
.bag-slot {

    background:
        linear-gradient(
            145deg,
            #30261e,
            #17120e
        );

    border:
        2px solid
        var(--fantasy-bronze-dark);

    color:
        #d7c8ab;

    box-shadow:
        inset 0 0 8px
        rgba(0, 0, 0, 0.75);
}



/* =========================================
   ГЛОБАЛЬНІ КНОПКИ
   ========================================= */

.main-screen button:not(
    .main-bottom-nav-btn
):not(
    .book-skill-remove
) {
    font-family: inherit;
}


/* =========================================
   М'ЯКІ АНІМАЦІЇ
   ========================================= */

button {
    -webkit-tap-highlight-color:
        transparent;
}

.ext-tab-btn,
.inventory-tab-btn,
.top-inv-btn,
.top-menu-item {

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.08s ease;
}

.ext-tab-btn:active,
.inventory-tab-btn:active,
.top-inv-btn:active,
.top-menu-item:active {

    transform:
        translateY(1px);
}

/* =========================================
   MYGAME — FANTASY UI
   ЕТАП 5.1.1
   ПОКРИТТЯ СТАРИХ КОМПОНЕНТІВ
   ========================================= */

/* =========================================
   МОБИ / ТРЕНУВАННЯ НА ЛОКАЦІЇ
   ========================================= */


.training-location-row {
    background:
        linear-gradient(
            145deg,
            #ddc796,
            #c7a970
        );
    border:
        1px solid
        var(--fantasy-bronze);
    color:
        var(--fantasy-text-dark);
}

.training-location-meta {
    color:
        #66513a;
}

.location-mob-attack-btn {
    min-width:0;
    min-height:50px;
    padding:6px 10px;

    border:1px solid #8b6545;
    border-radius:7px;

    background:
        linear-gradient(
            180deg,
            #3b2b22 0%,
            #211711 55%,
            #120c09 100%
        );

    color:#f6e3b6;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:13px;
    font-weight:700;

    text-shadow:
        0 2px 2px #000,
        0 0 4px rgba(0,0,0,.8);

    box-shadow:
        inset 0 1px 0 rgba(255,220,170,.12),
        inset 0 -3px 6px rgba(0,0,0,.55),
        0 2px 5px rgba(0,0,0,.45);

    cursor:pointer;
    white-space:nowrap;
}

/* Кнопка звичайного моба */
.location-mob-row[data-mob-tier="normal"]
.location-mob-attack-btn {
    width:86px;

    border-color:#557a94;

    background:
        linear-gradient(
            135deg,
            #173348 0%,
            #17191c 52%,
            #491a19 100%
        );

    box-shadow:
        inset 0 0 0 1px rgba(130,190,225,.18),
        inset 0 -4px 7px rgba(0,0,0,.55),
        0 2px 6px rgba(0,0,0,.5);
}

/* Кнопка елітного моба */
.location-mob-row[data-mob-tier="elite"]
.location-mob-attack-btn {
    width:86px;

    border-color:#9e4039;

    background:
        linear-gradient(
            135deg,
            #351010 0%,
            #171010 48%,
            #681d1b 100%
        );
}

/* Кнопка боса / мінібоса */
.location-mob-row[data-mob-tier="boss"]
.location-mob-attack-btn {
    width:86px;

    border-color:#87446f;

    background:
        linear-gradient(
            135deg,
            #291126 0%,
            #130e15 48%,
            #591725 100%
        );
}

.location-mob-attack-btn:active {
    transform:translateY(1px);
    filter:brightness(1.18);
}


.training-location-button {
    background:
        linear-gradient(
            180deg,
            #8c3b32,
            #56251f
        );
    border:
        1px solid #b97055;
    color:
        #f5dfc1;
    font-family:inherit;
}


/* =========================================
   КНИГА НАВИКІВ
   ========================================= */

#screen-skills
#skills-list-container {

    color:
        var(--fantasy-text-dark);
}


/* Прибираємо білий прямокутник
   під бойовими слотами */

#skills-list-container
.book-equipped-skills {

    background:
        linear-gradient(
            180deg,
            var(--fantasy-paper-light),
            var(--fantasy-paper)
        );
}


/* Карти навиків */

.learned-skill-card,
.book-skill-slot {

    background:
        linear-gradient(
            145deg,
            #34291f,
            #1d1712
        );

    border-color:
        var(--fantasy-bronze);

    color:
        var(--fantasy-text-light);
}


.learned-skill-description {
    border-color:
        rgba(209,170,88,0.30);
}


.skill-card-slot-btn {

    background:
        linear-gradient(
            180deg,
            #594027,
            #302117
        );

    border-color:
        var(--fantasy-bronze);

    color:
        var(--fantasy-text-light);
}


.skill-card-slot-btn.active {

    background:
        linear-gradient(
            180deg,
            #826038,
            #4b341e
        );

    border-color:
        var(--fantasy-gold);

    color:
        var(--fantasy-gold-light);
}


/* =========================================
   РЕАЛЬНІ МОДАЛКИ
   ОПИС НАВИКА ТА ІНШІ
   ========================================= */

.modal-bg
.modal-window {

    background:
        linear-gradient(
            145deg,
            var(--fantasy-paper-light),
            var(--fantasy-paper)
        );

    border:
        2px solid
        var(--fantasy-bronze);

    color:
        var(--fantasy-text-dark);

    box-shadow:
        inset 0 0 0 2px
            rgba(83,50,20,0.22),

        0 7px 24px
            rgba(0,0,0,0.70);
}


#skill-detail-body,
.skill-book-info-body {

    color:
        var(--fantasy-text-dark);
}


.skill-book-info-description {

    border-color:
        rgba(91,58,28,0.35);
}





/* =========================================
   УНІВЕРСАЛЬНІ МОДАЛКИ
   ПРЕДМЕТ / ПЕЧАТКИ / МОБ / ПІДТВЕРДЖЕННЯ
   ========================================= */

.trade-modal-content {

    background:
        linear-gradient(
            145deg,
            var(--fantasy-paper-light),
            var(--fantasy-paper)
        );

    color:
        var(--fantasy-text-dark);

    box-shadow:
        inset 0 0 0 2px
            rgba(83,50,20,0.20),

        0 8px 25px
            rgba(0,0,0,0.75);
}


/* Не чіпаємо border:
   предмети можуть ставити колір
   рамки по рідкості через JS */


/* =========================================
   ОПИС ПРЕДМЕТА
   ========================================= */

.item-info-body {
    color:
        var(--fantasy-text-dark);
}


.item-comparison-box,
.item-description-box {

    background:
        rgba(86,55,27,0.10);

    border:
        1px solid
        rgba(107,72,36,0.22);

    color:
        #493522;
}


.item-stats-block {
    color:
        #493522;
}


/* =========================================
   ПЕЧАТКИ / ДАНЖ
   ========================================= */

.dungeon-modal-title {

    color:
        #49301c;

    text-shadow:
        0 1px 0
        rgba(255,255,255,0.35);
}


.dungeon-seal-group {

    background:
        rgba(93,61,30,0.10);

    border:
        1px solid
        var(--fantasy-bronze);

    color:
        var(--fantasy-text-dark);
}


.dungeon-seal-row,
.dungeon-entry-row {

    border-bottom:
        1px solid
        rgba(105,70,34,0.25);

    color:
        var(--fantasy-text-dark);
}





/* =========================================
   ЗВИЧАЙНИЙ МАГАЗИН
   ========================================= */

#shop-content {

    background:
        linear-gradient(
            145deg,
            var(--fantasy-paper-light),
            var(--fantasy-paper)
        );

    border:
        2px solid
        var(--fantasy-bronze);

    color:
        var(--fantasy-text-dark);

    box-shadow:
        0 8px 24px
        rgba(0,0,0,0.70);
}


.shop-slot {

    background:
        linear-gradient(
            145deg,
            #34291f,
            #1b1612
        );

    color:
        var(--fantasy-text-light);

    box-shadow:
        inset 0 0 7px
        rgba(0,0,0,0.65);
}


.shop-slot.empty {

    color:
        #796b58;
}


#shop-content
.coins-bar {

    background:
        rgba(104,72,31,0.12);

    border:
        1px solid
        var(--fantasy-gold);

    color:
        #5b3d1e;
}


/* =========================================
   МАГАЗИН НАВИКІВ
   ========================================= */

#skill-shop-content {

    background:
        linear-gradient(
            145deg,
            var(--fantasy-paper-light),
            var(--fantasy-paper)
        );

    border:
        2px solid
        var(--fantasy-bronze);

    color:
        var(--fantasy-text-dark);
}


.skill-shop-slot {

    background:
        linear-gradient(
            145deg,
            #34291f,
            #1b1612
        );

    border-color:
        var(--fantasy-bronze);

    color:
        var(--fantasy-text-light);
}


.skill-shop-type {
    color:
        #b9a98d;
}


#skill-shop-gold-bar {

    background:
        rgba(104,72,31,0.12);

    border-color:
        var(--fantasy-gold);

    color:
        #5b3d1e;
}


/* =========================================
   ОСОБИСТА СКРИНЯ
   ========================================= */

.personal-storage-box {

    background:
        linear-gradient(
            145deg,
            var(--fantasy-paper-light),
            var(--fantasy-paper)
        );

    border:
        2px solid
        var(--fantasy-bronze);

    color:
        var(--fantasy-text-dark);

    box-shadow:
        0 8px 24px
        rgba(0,0,0,0.70);
}


.personal-storage-title {

    color:
        #49301c;
}








.personal-storage-slot {

    background:
        linear-gradient(
            145deg,
            #34291f,
            #1b1612
        );

    color:
        var(--fantasy-text-light);

    box-shadow:
        inset 0 0 7px
        rgba(0,0,0,0.65);
}


.personal-storage-meta {

    color:
        #b5a487;
}

.personal-storage-art {
    width: 72%;
    height: 70%;
    flex: 0 0 auto;
    object-fit: contain;
    object-position: center;
}


/* =========================================
   МАЙСТЕРНЯ
   ========================================= */

#workshop-content {

    background:
        linear-gradient(
            145deg,
            var(--fantasy-paper-light),
            var(--fantasy-paper)
        );

    border:
        2px solid
        var(--fantasy-bronze);

    color:
        var(--fantasy-text-dark);
}


#workshop-summary,
.workshop-recipe-tier,
.workshop-recipe-desc,
.workshop-locked-text {

    color:
        #66513a;
}


.workshop-recipe-card {

    background:
        rgba(89,57,27,0.10);

    border-color:
        var(--fantasy-bronze);
}





/* =========================================
   КУЗНЯ
   ========================================= */

#forge-info {

    background:
        rgba(89,57,27,0.10);

    border:
        1px solid
        var(--fantasy-bronze);

    color:
        var(--fantasy-text-dark);
}


.forge-help-text,
#forge-item-stats {

    color:
        #66513a;
}





/* =========================================
   КНОПКИ МОДАЛОК
   ========================================= */







/* =========================================
   ІНВЕНТАР — ДОДАТКОВІ БІЛІ ЕЛЕМЕНТИ
   ========================================= */

.coins-bar {

    background:
        rgba(104,72,31,0.12);

    border-color:
        var(--fantasy-gold);

    color:
        #5b3d1e;
}





/* =========================================
   МОБ — ВНУТРІШНІ БІЛІ БЛОКИ
   ========================================= */

.mob-drop-box {

    background:
        rgba(89,57,27,0.10);

    border-color:
        var(--fantasy-bronze);

    color:
        var(--fantasy-text-dark);
}


.mob-drop-title,
.mob-drop-items {

    color:
        #59442f;
}


/* =========================================
   СУВОЇ У БОЮ
   ========================================= */

#battle-scroll-menu {

    background:
        linear-gradient(
            145deg,
            var(--fantasy-paper-light),
            var(--fantasy-paper)
        );

    border-color:
        var(--fantasy-bronze);
}


.battle-scroll-menu-item {

    background:
        rgba(71,48,28,0.12);

    border-color:
        var(--fantasy-bronze);

    color:
        var(--fantasy-text-dark);
}

/* =========================================
   FANTASY UI — 5.2
   ТЕКСТУРИ ТА SVG-РАМКИ
========================================= */

/* Дерев'яний фон */
body {
    background-image:
        url("assets/ui/wood-texture.svg"),
        radial-gradient(circle at 50% 15%,rgba(135,86,38,.16),transparent 38%),
        linear-gradient(180deg,#241710 0%,#16100c 55%,#100c09 100%);
    background-repeat: repeat,no-repeat,no-repeat;
}


/* Пергамент */
#location-card,
#screen-character #modal-content,
#screen-inventory #inv-content,
#screen-skills > .modal-window,
.main-screen-placeholder,
#shop-content,
#skill-shop-content,
.personal-storage-box,
#workshop-content,
.modal-bg .modal-window,
.trade-modal-content {
    background-image:
        url("assets/ui/paper-texture.svg"),
        linear-gradient(145deg,var(--fantasy-paper-light),var(--fantasy-paper));
    background-repeat: repeat,no-repeat;
}

/* Бронзова SVG-рамка */
#location-card,
#screen-character #modal-content,
#screen-inventory #inv-content,
#screen-skills > .modal-window,
.main-screen-placeholder,
#shop-content,
#skill-shop-content,
.personal-storage-box,
#workshop-content,
.modal-bg .modal-window {
    border: 8px solid transparent;
    border-image: url("assets/ui/frame-bronze.svg") 24 / 8px / 0 stretch;
}


/* Декоративна лінія під заголовком */
.modal-title,
.inv-main-title,
.skills-modal-title,
#location-title,
.dungeon-modal-title {
    position: relative;
    padding-bottom: 8px;
}
.modal-title::after,
.inv-main-title::after,
.skills-modal-title::after,
#location-title::after,
.dungeon-modal-title::after {
    content: "";
    display: block;
    width: 68%;
    height: 2px;
    margin: 7px auto 0;
    background: linear-gradient(90deg,transparent,var(--fantasy-bronze),var(--fantasy-gold),var(--fantasy-bronze),transparent);
    box-shadow: 0 1px 0 rgba(255,255,255,.25);
}




/* SKILLS BOOK — LEVEL LOCK */
#skills-list-container
.learned-skill-card.skill-locked-by-level {
    opacity: .58;
    filter: grayscale(1);
    border-color: #665f56;
    background: #292725;
}

#skills-list-container
.learned-skill-card.skill-locked-by-level:hover,
#skills-list-container
.learned-skill-card.skill-locked-by-level:active {
    opacity: .72;
}

#skills-list-container
.skill-level-lock {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 600;
    color: #d8d0c3;
    opacity: .82;
}

#skills-list-container
.learned-skill-card.skill-locked-by-level
.forge-upgrade-btn:disabled {
    opacity: .55;
    cursor: default;
}


/* =========================================
   SCROLL CONTAINMENT / MODAL BACKGROUND FIX
   ========================================= */
html,
body {
    overscroll-behavior-y:none;
}

.fullscreen-modal-bg,
.modal-bg,
#inv-modal-bg,
#mob-modal,
#game-log-shell {
    overscroll-behavior:contain;
}

.fullscreen-modal-bg > *,
.modal-bg > *,
#inv-modal-bg > * {
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

body:has(.fullscreen-modal-bg[style*="display: flex"]),
body:has(.modal-bg[style*="display: flex"]) {
    overflow:hidden;
}

/* =========================================
   КУЗНЯ — НЕПРОЗОРЕ ЧИТАБЕЛЬНЕ ВІКНО
   ========================================= */
#forge-modal {
    background:rgba(8,5,3,.86);
    padding:10px;
    overflow:hidden;
}

#forge-modal .forge-modal-box {
    width:min(98vw,560px);
    max-height:92vh;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:14px;
    color:var(--fantasy-text-dark);
    background-image:
        url("assets/ui/paper-texture.svg"),
        linear-gradient(145deg,#efd9a6,#c9a66b);
    background-repeat:repeat,no-repeat;
    border:8px solid transparent;
    border-image:url("assets/ui/frame-bronze.svg") 24 / 8px / 0 stretch;
    box-shadow:
        inset 0 0 18px rgba(79,46,19,.18),
        0 10px 28px rgba(0,0,0,.82);
}

#forge-modal .shop-modal-title,
#forge-modal .forge-help-text,
#forge-modal #forge-item-stats,
#forge-modal #forge-cost,
#forge-modal #forge-chance {
    color:#3c2817;
    text-shadow:none;
}

#forge-modal #forge-info {
    background:rgba(244,222,176,.94);
    border:1px solid #9b6d32;
    color:#332113;
    box-shadow:inset 0 0 9px rgba(87,53,23,.14);
}

#forge-modal .forge-result-log {
    margin:8px 0 0;
    padding:7px 9px;
    border:1px solid rgba(92,61,29,.38);
    border-radius:6px;
    background:rgba(82,57,30,.10);
    color:#49301c;
    font-size:12px;
    font-weight:700;
    line-height:1.3;
    text-align:center;
}

#forge-modal .forge-result-log[hidden] {
    display:none;
}

#forge-modal .forge-result-log.is-success {
    border-color:#5d8b4e;
    background:rgba(75,132,63,.14);
    color:#2f6d2b;
}

#forge-modal .forge-result-log.is-failure,
#forge-modal .forge-result-log.is-error {
    border-color:#a34d3e;
    background:rgba(153,62,45,.12);
    color:#8a3026;
}

#forge-modal .forge-result-log.is-warning {
    border-color:#b07b2d;
    background:rgba(184,128,42,.12);
    color:#7a4d12;
}

/* =========================================
   КУЗНЯ — ГОЛОВНЕ МЕНЮ + РОЗДІЛИ
   ========================================= */

#forge-modal .forge-menu-panel {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin:8px 0 4px;
}

#forge-modal .forge-menu-btn {
    width: 100%;
    min-height: 58px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}



#forge-modal .forge-section-header {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    margin:4px 0 10px;
}

#forge-modal .forge-back-btn {
    min-width: 58px;
    min-height: 30px;
    padding: 5px 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}



#forge-modal .forge-section-title {
    min-width:0;
    text-align:center;
    color:#4a301a;
    font-size:15px;
    font-weight:800;
}

#forge-modal .forge-section-spacer {
    width:58px;
}

#forge-modal .forge-dismantle-layout {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}

#forge-modal .forge-dismantle-section {
    min-width:0;
    padding:8px;
    border:1px solid rgba(123,82,38,.34);
    border-radius:8px;
    background:rgba(244,222,176,.58);
}

#forge-modal .forge-dismantle-target-section {
    background:rgba(111,74,36,.10);
}

#forge-modal .forge-dismantle-section-title {
    margin-bottom:6px;
    text-align:center;
    color:#4a301a;
    font-size:12px;
    font-weight:800;
}

#forge-modal .forge-dismantle-grid {
    min-height:78px;
}

#forge-modal .forge-dismantle-item-slot {
    cursor:pointer;
}

#forge-modal .forge-dismantle-item-slot.is-selected {
    outline:2px solid #8d6b36;
    outline-offset:-2px;
}

#forge-modal .forge-dismantle-reward {
    margin-top:10px;
    padding:9px 10px;
    border:1px solid #9b6d32;
    border-radius:8px;
    background:rgba(244,222,176,.94);
    color:#332113;
}

#forge-modal .forge-dismantle-reward-title {
    margin-bottom:5px;
    text-align:center;
    font-size:12px;
    font-weight:800;
}

#forge-modal .forge-dismantle-reward-list {
    display:flex;
    flex-direction:column;
    gap:3px;
}

#forge-modal .forge-dismantle-reward-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:11px;
}

#forge-modal .forge-dismantle-reward-empty {
    text-align:center;
    font-size:11px;
    opacity:.72;
}

#forge-modal .forge-dismantle-note {
    margin:7px 0;
    color:#6b5136;
    font-size:10px;
    line-height:1.35;
    text-align:center;
}

#forge-modal .forge-dismantle-btn {
    width:100%;
    min-height:36px;
}

@media (min-width:500px) {
    #forge-modal .forge-dismantle-layout {
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);
    }
}

#forge-modal #forge-menu-panel[hidden],
#forge-modal #forge-upgrade-panel[hidden],
#forge-modal #forge-rank-panel[hidden],
#forge-modal #forge-dismantle-panel[hidden],
#forge-modal #forge-enchant-panel[hidden],
#forge-modal .forge-rank-info[hidden],
#forge-modal .forge-rank-warning[hidden] {
    display:none !important;
}

#forge-modal .forge-rank-info {
    margin-top:10px;
    padding:10px;
    border:1px solid #9b6d32;
    border-radius:8px;
    background:rgba(244,222,176,.94);
    color:#332113;
    box-shadow:
        inset 0 0 9px rgba(87,53,23,.14);
}

#forge-modal .forge-rank-target-summary {
    margin-bottom:7px;
    padding-bottom:6px;
    border-bottom:
        1px solid
        rgba(123,82,38,.30);
    text-align:center;
}

#forge-modal .forge-rank-main-line {
    font-size:14px;
}

#forge-modal .forge-rank-main-meta {
    margin-top:2px;
    font-size:11px;
    opacity:.78;
}

#forge-modal .forge-rank-progress {
    margin:7px 0;
}

#forge-modal .forge-rank-progress-line {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:12px;
}

#forge-modal .forge-rank-progress-track {
    height:8px;
    margin-top:4px;
    overflow:hidden;
    border:1px solid rgba(96,62,29,.42);
    border-radius:999px;
    background:rgba(64,42,23,.16);
}

#forge-modal .forge-rank-progress-fill {
    height:100%;
    min-width:0;
    background:
        linear-gradient(
            90deg,
            #6f8d45,
            #9ab95f
        );
}

#forge-modal .forge-rank-preview {
    margin:7px 0 9px;
    padding:6px 8px;
    border:1px solid rgba(107,72,36,.28);
    border-radius:6px;
    background:rgba(86,55,27,.07);
}

#forge-modal .forge-rank-preview-line {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:2px 0;
    font-size:11px;
}

#forge-modal .forge-rank-preview-line b {
    text-align:right;
}

#forge-modal .forge-rank-donor-title {
    margin:8px 0 5px;
    font-size:12px;
    font-weight:800;
    text-align:center;
}

#forge-modal .forge-rank-donor-grid {
    margin-top:0;
}

#forge-modal .forge-rank-donor-slot {
    position:relative;
}

#forge-modal .forge-rank-warning {
    margin-top:7px;
    padding:6px 8px;
    border:1px solid #b07b2d;
    border-radius:6px;
    background:rgba(184,128,42,.12);
    color:#7a4d12;
    font-size:10px;
    font-weight:700;
    line-height:1.3;
}

#forge-modal #forge-rank-absorb-btn {
    width:100%;
    margin-top:8px;
}

#forge-modal #forge-rank-absorb-btn:disabled {
    opacity:.55;
    cursor:not-allowed;
}

#forge-modal .shop-close-btn {
    width:100%;
    margin-top:10px;
    padding:9px;
    border:1px solid var(--fantasy-bronze);
    border-radius:6px;
    background:linear-gradient(180deg,#594027,#302117);
    color:var(--fantasy-text-light);
    font-family:inherit;
    font-weight:700;
}

.debug-item-builder-fields {
    display:grid;
    grid-template-columns:1fr;
    gap:5px;
    margin:8px 0;
}


/* =========================================
   ITEM INFO — CONSUMABLES / MATERIALS
   ========================================= */
.item-context-box {
    margin-top: 8px;
    padding: 8px 9px;
    border: 1px solid rgba(107,72,36,.28);
    border-radius: 7px;
    background: rgba(86,55,27,.08);
    color: #493522;
}

.item-context-title {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.item-context-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
    font-size: 12px;
}

.item-context-row-block {
    align-items: flex-start;
}

.item-context-row-block b {
    max-width: 68%;
    text-align: right;
    line-height: 1.25;
}

.item-rank-promotion-mark {
    margin-top: 7px;
    padding: 6px 8px;
    border: 1px solid rgba(150,101,33,.38);
    border-radius: 6px;
    background: rgba(177,125,43,.10);
    color: #7a4d12;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

/* =========================================
   FORGE — ITEM ART + PREVIEW
   ========================================= */
#forge-modal .forge-item-slot {
    position: relative;
    flex-direction: column;
    gap: 0;
    padding: 2px;
}

#forge-modal .forge-item-slot.is-selected {
    outline: 2px solid var(--fantasy-gold);
    outline-offset: -2px;
    filter: brightness(1.08);
}

#forge-modal .forge-slot-art {
    width: 82%;
    height: 82%;
    flex: 0 0 auto;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
}

#forge-modal .forge-slot-no-art {
    font-size: 20px;
    opacity: .45;
}

#forge-modal #forge-item-name {
    margin-bottom: 7px;
    font-size: 16px;
    font-weight: 800;
}

#forge-modal #forge-item-stats {
    display: block;
    color: #4b3520;
}

#forge-modal .forge-level-preview {
    margin-bottom: 7px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(123,82,38,.35);
    text-align: center;
    font-size: 13px;
}

#forge-modal .forge-stat-preview-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#forge-modal .forge-stat-preview-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    padding: 2px 0;
    border-bottom: 1px solid rgba(123,82,38,.15);
}

#forge-modal .forge-stat-preview-name {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 12px;
}

#forge-modal .forge-stat-preview-name
.stat-inline-icon {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
}

#forge-modal .forge-stat-preview-values {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
    font-size: 12px;
}

#forge-modal .forge-stat-preview-arrow {
    opacity: .65;
}

#forge-modal .forge-stat-preview-values
.item-stat-difference {
    font-size: 11px;
}

#forge-modal .forge-empty-stats {
    padding: 5px 0;
    text-align: center;
    opacity: .7;
}

/* =========================================
   MODAL CORNER CLOSE
   ========================================= */
#workshop-content,
.personal-storage-box,
#shop-content,
#skill-shop-content,
#forge-modal .forge-modal-box,
.trade-modal-content,
.dungeon-modal-content,
.mob-info-modal-content {
    position: relative;
}

.modal-corner-close {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 12;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(107,72,36,.48);
    border-radius: 6px;
    background: rgba(57,37,23,.82);
    color: #f5dfb4;
    font-family: Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,.28);
}

#workshop-content > .inv-main-title,
.personal-storage-box > h3,
#shop-content > .inv-main-title,
#skill-shop-content > .inv-main-title,
#forge-modal .shop-modal-title,
.dungeon-modal-content > .dungeon-modal-title,
.mob-info-modal-content > .bm-modal-title {
    padding-left: 30px;
    padding-right: 30px;
}

/* Старі нижні кнопки закриття/скасування.
   У цих вікнах тепер є один стандартний
   хрестик справа зверху. */
#shop-content > .close-modal,
#skill-shop-content > .close-modal,
#forge-modal .shop-close-btn,
.dungeon-modal-content > .close-modal,
.mob-info-buttons-row,
#trade-modal-bg .trade-no-btn,
#battle-modal-bg .bm-cancel-btn {
    display: none !important;
}

/* Журнал під відкритою модалкою не повинен
   перехоплювати повторний/ghost tap. */
body:has(.fullscreen-modal-bg[style*="display: flex"])
#game-log-shell,
body:has(.trade-modal-bg[style*="display: flex"])
#game-log-shell,
body:has(#workshop-modal[style*="display: flex"])
#game-log-shell {
    pointer-events: none;
}

/* =========================================
   BASIC ATTACK + AUTOATTACK TOGGLE
   ========================================= */
.battle-basic-attack-controls {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
}

.battle-auto-attack-toggle {
    min-width:132px;
    padding:4px 10px;
    border:1px solid var(--fantasy-bronze);
    border-radius:6px;
    background:rgba(39,25,16,.88);
    color:#d8c39a;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
}

.battle-auto-attack-toggle.is-on {
    color:#fff0bd;
    border-color:var(--fantasy-gold);
    box-shadow:0 0 8px rgba(224,180,78,.32);
}

.battle-basic-attack-btn {
    width:min(290px,92%);
    min-height:42px;
    padding:8px 14px;
    border:1px solid var(--fantasy-gold);
    border-radius:7px;
    background:linear-gradient(180deg,#60401f,#2c1b0f);
    color:#f7e5b8;
    font-family:Georgia,"Times New Roman",serif;
    font-weight:700;
    text-shadow:0 1px 2px #000;
    cursor:pointer;
}

.battle-basic-attack-btn:disabled,
.battle-auto-attack-toggle:disabled {
    opacity:.55;
    cursor:default;
}


/* =========================================
   INVENTORY CHARACTER EQUIPMENT LAYOUT
   ========================================= */
#equip-grid {
    --equip-gap: clamp(8px, 2.2vw, 14px);
    --equip-slot-size: clamp(64px, 18vw, 86px);

    display: grid;
    grid-template-columns:
        var(--equip-slot-size)
        minmax(0, 1fr)
        var(--equip-slot-size);
    grid-template-rows:
        var(--equip-slot-size)
        repeat(3, var(--equip-slot-size));
    column-gap: var(--equip-gap);
    row-gap: var(--equip-gap);
    align-items: start;
    justify-items: stretch;

    width: 100%;
    padding-inline: var(--equip-gap);
    box-sizing: border-box;
}

#equip-grid > .equip-slot {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}

.equip-slot-amulet {
    grid-column: 1;
    grid-row: 1;
}

.equip-slot-head {
    grid-column: 2;
    grid-row: 1;
    width: var(--equip-slot-size) !important;
    justify-self: center;
}

.equip-slot-cloak {
    grid-column: 3;
    grid-row: 1;
}

.equip-slot-gloves {
    grid-column: 1;
    grid-row: 2;
}

.equip-slot-body {
    grid-column: 3;
    grid-row: 2;
}

.equip-slot-left-hand {
    grid-column: 1;
    grid-row: 3;
}

.equip-slot-right-hand {
    grid-column: 3;
    grid-row: 3;
}

.equip-slot-ring {
    grid-column: 1;
    grid-row: 4;
}

.equip-slot-legs {
    grid-column: 3;
    grid-row: 4;
}

.character-preview {
    grid-column: 2;
    grid-row: 2 / span 3;

    width: 100%;
    max-width: 190px;
    aspect-ratio: 2 / 3;
    align-self: center;
    justify-self: center;

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

    border: 2px solid var(--fantasy-bronze-dark);
    border-radius: 10px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.18),
            rgba(56,39,24,.08)
        );
    box-shadow:
        inset 0 0 12px rgba(56,39,24,.18);
    overflow: hidden;
}

.character-preview-label {
    opacity: .42;
    font-size: 12px;
    text-align: center;
}

/* Skill artwork stays below cooldown/status layers. */
.main-slot > .battle-skill-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

.main-slot > .cd-overlay {
    z-index: 5;
}

.main-slot .skill-slot-subtext {
    position: relative;
    z-index: 6;
}


/* =========================================
   ORBIS GAME SPLASH
   ========================================= */
.game-splash {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: #06101f;
    opacity: 1;
    visibility: visible;
    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.game-splash img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}

.game-splash.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =========================================
   INVENTORY ART FRAMES
   ========================================= */
.equip-slot,
.inventory-slot,
.bag-slot {
    background:
        url("assets/ui/frames/inventory-slot-frame.webp")
        center / 100% 100%
        no-repeat !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: #5b4631;
}

.equip-slot.is-filled,
.equip-slot.is-empty {
    background:
        url("assets/ui/frames/inventory-slot-frame.webp")
        center / 100% 100%
        no-repeat !important;

    border: 0 !important;
    box-shadow: none !important;
}

.equip-slot-label {
    color: #79644b;
}

.character-preview {
    background:
        url("assets/ui/frames/character-skin-frame.webp")
        center / 100% 100%
        no-repeat !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.character-preview-label {
    color: #725b42;
    opacity: .55;
}


/* =========================================
   ITEM RARITY SURFACES
   Художні фони рангів R1-R6.
   ========================================= */
.item-rarity-r1 {
    --item-rarity-color: #9e9e9e;
    --item-rarity-bg: url("assets/ui/rarity/rarity-r1.webp");
}

.item-rarity-r2 {
    --item-rarity-color: #4caf50;
    --item-rarity-bg: url("assets/ui/rarity/rarity-r2.webp");
}

.item-rarity-r3 {
    --item-rarity-color: #2196f3;
    --item-rarity-bg: url("assets/ui/rarity/rarity-r3.webp");
}

.item-rarity-r4 {
    --item-rarity-color: #a335ee;
    --item-rarity-bg: url("assets/ui/rarity/rarity-r4.webp");
}

.item-rarity-r5 {
    --item-rarity-color: #ff9800;
    --item-rarity-bg: url("assets/ui/rarity/rarity-r5.webp");
}

.item-rarity-r6 {
    --item-rarity-color: #e53935;
    --item-rarity-bg: url("assets/ui/rarity/rarity-r6.webp");
}

.item-rarity-surface {
    position: relative;
    isolation: isolate;
}

.item-rarity-surface::before {
    content: "";
    position: absolute;
    inset: var(--item-rarity-inset, 4px);
    z-index: -1;
    pointer-events: none;
    border-radius: var(--item-rarity-radius, 6px);
    background-image: var(--item-rarity-bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bag-slot.item-rarity-surface,
.inventory-slot.item-rarity-surface,
.equip-slot.item-rarity-surface {
    --item-rarity-inset: 15%;
    --item-rarity-radius: 10%;
}


/* Арт предмета всередині інвентарних та екіпіровочних слотів. */
.item-slot-art {
    display: block;
    width: 72%;
    height: 72%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    position: relative;
    z-index: 1;
    filter:
        drop-shadow(
            0 2px 2px
            rgba(0, 0, 0, .48)
        );
}

.item-slot-count {
    position: absolute;
    right: 13%;
    bottom: 12%;
    z-index: 2;

    min-width: 18px;
    padding: 1px 4px;

    border-radius: 5px;
    background: rgba(20, 14, 9, .82);

    color: #f2dfb2;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;

    pointer-events: none;
}

.shop-slot.item-rarity-surface,
.personal-storage-slot.item-rarity-surface {
    --item-rarity-inset: 3px;
    --item-rarity-radius: 5px;
}

.item-rarity-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 1px 5px;
    border: 1px solid var(--item-rarity-color);
    border-radius: 5px;
    background: rgba(25,18,13,.82);
    color: var(--item-rarity-color);
    font-size: .9em;
    font-weight: 700;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
    vertical-align: baseline;
}



/* =========================================
   ITEM INFO WINDOW ASSETS
   ========================================= */

.item-modal-art-slot {
    display: none;
}

.item-info-modal-content {
    width: min(calc(100vw - 34px), 390px);
    max-width: 390px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;

    position: relative;
    isolation: isolate;

    padding:
        clamp(20px, 5vw, 26px)
        clamp(30px, 9vw, 38px)
        clamp(16px, 4vw, 20px);

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    color: #3e2a18;

    box-shadow: none !important;

    scrollbar-width: none;
}

/*
   Пергамент навмисно менший за зовнішню PNG-рамку.
   Якщо декоративні краї рамки заходять поверх нього —
   це очікуваний ефект.
*/
.item-info-modal-content::before {
    content: "";

    position: absolute;

    inset:
        6%
        10.5%
        6.5%;

    z-index: 0;

    pointer-events: none;

    background-image:
        url("assets/ui/paper-texture.svg"),
        linear-gradient(
            180deg,
            #ead39a,
            #c8a86a
        );

    background-position:
        center,
        center;

    background-size:
        210px 210px,
        100% 100%;

    background-repeat:
        repeat,
        no-repeat;
}

.item-info-modal-content::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        url("assets/ui/item-window/item-window-frame.png")
        center / 100% 100%
        no-repeat;
}

/* Контент над пергаментом, під основною золотою рамкою. */
.item-info-modal-content > * {
    position: relative;
    z-index: 2;
}

.item-info-modal-content::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Квадрат арту. */
.item-info-modal-content
.item-modal-art-slot {
    display: grid;
    place-items: center;

    position: relative;
    isolation: isolate;

    width: min(60vw, 260px);
    max-width: 100%;
    aspect-ratio: 1 / 1;

    margin:
        0 auto
        7px;

    overflow: hidden;

    border: 0;
    border-radius: 0;

    background: none;

    box-shadow: none;
}

/* Кольоровий фон рангу — менший за рамку арту. */
.item-info-modal-content
.item-modal-art-slot::before {
    content: "";

    position: absolute;
    inset: 13.5%;

    z-index: 0;

    pointer-events: none;

    background-image:
        var(--item-rarity-bg);

    background-position:
        center;

    background-repeat:
        no-repeat;

    background-size:
        cover;

    box-shadow:
        inset 0 0 20px
        rgba(0,0,0,.34);
}

.item-info-modal-content
.item-modal-art-slot::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 4;

    pointer-events: none;

    background:
        url("assets/ui/item-window/item-art-frame.png")
        center / contain
        no-repeat;
}

.item-info-modal-content
.item-modal-art-image {
    position: absolute;

    inset: 15%;

    width: 70%;
    height: 70%;

    object-fit: contain;

    z-index: 2;

    filter:
        drop-shadow(
            0 3px 4px
            rgba(0,0,0,.5)
        );
}

.item-info-modal-content
.tm-icon-style {
    position: relative;

    z-index: 2;

    margin: 0;

    font-size:
        clamp(30px, 9vw, 52px);

    color: #f4e3bc;

    text-shadow:
        0 2px 5px
        rgba(0,0,0,.72);
}

/* Назва просто на пергаменті. */
.item-info-modal-content
.tm-title-style {
    min-height: 0;

    width: 86%;

    margin:
        0 auto
        4px;

    padding:
        2px
        2px
        4px;

    box-sizing: border-box;

    display: block;

    background: none !important;

    color: #3b2615 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(16px, 4.6vw, 20px);

    line-height: 1.08;

    text-align: center;

    overflow-wrap: anywhere;

    text-shadow:
        0 1px 0
        rgba(255,245,210,.65);
}

.item-info-modal-content
.tm-question-style {
    margin-bottom: 6px;

    color: #3f2d1d;
}

/* Компактна інформація про предмет. */
.item-info-modal-content
.item-info-body {
    width: 84%;

    margin:
        0 auto;

    font-size:
        clamp(11px, 3.2vw, 13px);

    line-height: 1.24;

    padding-bottom: 58px;
}

.item-info-modal-content
.item-info-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 2px 6px;

    margin:
        0 0
        5px;

    padding-bottom: 5px;

    border-bottom:
        1px solid
        rgba(94,57,24,.28);

    font-size:
        clamp(12px, 3.5vw, 15px);

    color: #4a311d;
}

.item-info-modal-content
.item-info-meta::after {
    display: none;
}

/* Характеристики — компактно, без окремих графічних панелей. */
.item-info-modal-content
.item-stats-block {
    margin-top: 7px;

    padding:
        0 1px;

    background: none !important;

    color: #3f2c1a;
}

.item-info-modal-content
.item-stats-block-title {
    margin-bottom: 3px;

    padding-bottom: 3px;

    border-bottom:
        1px solid
        rgba(94,57,24,.25);

    color: #4c3018;

    font-size:
        clamp(13px, 3.7vw, 15px);

    line-height: 1.15;
}

.item-info-modal-content
.item-stat-row,
.item-info-modal-content
.item-lost-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 8px;

    margin:
        3px 0;

    font-size:
        clamp(11px, 3.15vw, 13px);

    line-height: 1.2;
}

.item-info-modal-content
.item-stat-row > span:first-child,
.item-info-modal-content
.item-lost-stat-row > span:first-child {
    flex:
        1 1 auto;

    min-width: 0;

    overflow-wrap: anywhere;
}

.item-info-modal-content
.item-stat-value,
.item-info-modal-content
.item-lost-stat-row > span:last-child {
    flex:
        0 0 auto;

    max-width: 48%;

    text-align: right;

    white-space: nowrap;

    font-size:
        clamp(11px, 3.15vw, 13px);
}

.item-info-modal-content
.item-stat-difference {
    margin-left: 3px;

    font-size:
        clamp(10px, 2.8vw, 12px);
}

.item-info-modal-content
.item-stat-difference.is-equal {
    color: #6d6254;
}

/* Опис, порівняння та ціна теж просто на пергаменті. */
.item-info-modal-content
.item-description-box,
.item-info-modal-content
.item-comparison-box {
    margin-top: 7px;

    padding:
        5px 1px
        0;

    border: 0;

    border-top:
        1px solid
        rgba(94,57,24,.22);

    border-radius: 0;

    background: none !important;

    color: #46311f;
}

.item-info-modal-content
.item-comparison-box {
    font-size:
        clamp(10px, 2.9vw, 12px);

    line-height: 1.2;
}

.item-info-modal-content
.item-description-box {
    font-size:
        clamp(10px, 3vw, 12px);

    line-height: 1.25;
}

.item-info-modal-content
.item-price-box {
    margin-top: 7px;

    padding-top: 5px;

    border-top:
        1px solid
        rgba(94,57,24,.24);

    color: #4b321d;

    font-size:
        clamp(10px, 3vw, 12px);
}

.item-info-modal-content
.item-lost-stats {
    margin-top: 7px;

    padding:
        5px 1px
        0;

    border: 0;

    border-top:
        1px solid
        rgba(94,57,24,.22);

    background: none !important;
}

.item-info-modal-content
.item-lost-stats-title {
    font-size:
        clamp(10px, 3vw, 12px);
}

/*
   Кнопки вище за основну декоративну рамку.
   Sticky залишає їх доступними внизу під час прокрутки.
*/
.item-info-modal-content
.trade-buttons-row {
    position: sticky;
    bottom: 0;

    z-index: 6;

    gap: 8px;

    margin-top: 10px;

    padding:
        7px 0
        3px;

    background: transparent !important;
}

.item-info-modal-content
.trade-no-btn,
.item-info-modal-content
.trade-yes-btn {
    position: relative;

    z-index: 7;

    min-height: 44px;

    padding:
        6px 10px;

    border: 0 !important;

    border-radius: 0 !important;

    font-family: inherit;

    font-size:
        clamp(13px, 3.6vw, 16px);

    font-weight: 700;

    color: #f6e5bd;

    text-shadow:
        0 2px 3px
        rgba(0,0,0,.9);

    box-shadow: none !important;
}

.item-info-modal-content
.trade-no-btn {
    background:
        transparent
        url("assets/ui/item-window/item-button-dark.png")
        center / contain
        no-repeat !important;
}

.item-info-modal-content
.trade-yes-btn {
    background:
        transparent
        url("assets/ui/item-window/item-button-green.png")
        center / contain
        no-repeat !important;

    color: #fff0c9;
}

@media (max-height: 700px) {
    .item-info-modal-content {
        max-height: 90vh;

        padding:
            15px
            28px
            12px;
    }

    .item-info-modal-content::before {
        inset:
            6.5%
            10.5%
            7%;
    }

    .item-info-modal-content
    .item-modal-art-slot {
        width: min(46vw, 185px);
    }

    .item-info-modal-content
    .tm-title-style {
        font-size: 15px;
    }

    .item-info-modal-content
    .item-info-body {
        padding-bottom: 52px;
    }

    .item-info-modal-content
    .trade-buttons-row {
        padding-top: 5px;
    }
}


/* Corner close stays above decorative item/mob frames. */
.item-info-modal-content > .modal-corner-close,
.mob-info-modal-content > .modal-corner-close {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 12;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}


/* =========================================
   ORBIS BUTTON SYSTEM v5
   Reusable decorative overlay.
   The control keeps its own geometry; the
   Orbis frame is painted independently above it.
   ========================================= */

:root {
    --orbis-button-gold-soft: #d9a747;
    --orbis-button-gold: #efc55f;
    --orbis-button-gold-light: #ffe3a0;
    --orbis-button-bronze: #9a5f24;
    --orbis-button-bronze-dark: #5d3517;
    --orbis-button-brown-top: #543622;
    --orbis-button-brown-mid: #332015;
    --orbis-button-brown-bottom: #1a100b;
}

/* =========================================
   SHARED ORBIS CONTROL SURFACE
   ========================================= */

.ext-tab-btn,
.inventory-tab-btn,
.workshop-tab-btn,
.personal-storage-tabs button,
.inventory-expand-btn,
.stats-reset-btn,
.workshop-craft-btn,
#forge-modal .forge-menu-btn,
#forge-modal .forge-back-btn,
#forge-modal .forge-upgrade-btn,
#forge-modal .forge-dismantle-btn,
#forge-modal #forge-rank-absorb-btn,
.dungeon-entry-btn,
.bm-fight-btn,
.bm-cancel-btn,
.arena-escape-btn,
.skills-modal-close-btn,
.modal-close-btn,
.close-modal,
.trade-modal-content:not(.item-info-modal-content)
.trade-yes-btn,
.trade-modal-content:not(.item-info-modal-content)
.trade-no-btn {
    --orbis-frame-size: 10px;
    --orbis-frame-inset: 0px;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;

    border:
        1px solid
        var(--orbis-button-bronze);

    border-radius:
        0;

    color:
        #f2dfb7;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,224,154,.08) 50%,
            transparent 100%
        )
        top 2px center /
        calc(100% - 26px) 1px
        no-repeat,

        radial-gradient(
            ellipse at 50% -35%,
            rgba(255,225,160,.15),
            transparent 62%
        ),

        linear-gradient(
            180deg,
            var(--orbis-button-brown-top) 0%,
            var(--orbis-button-brown-mid) 50%,
            var(--orbis-button-brown-bottom) 100%
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(255,221,145,.11),
        inset 0 1px 0
        rgba(255,236,186,.18),
        inset 0 -2px 4px
        rgba(0,0,0,.38),
        0 2px 5px
        rgba(40,22,12,.24);

    text-shadow:
        0 1px 2px
        rgba(0,0,0,.82);
}

/*
   This is the real Orbis frame.
   It uses the same source and slice as
   #location-card and .forge-modal-box.
   Only --orbis-frame-size changes.
*/
.ext-tab-btn::after,
.inventory-tab-btn::after,
.workshop-tab-btn::after,
.personal-storage-tabs button::after,
.inventory-expand-btn::after,
.stats-reset-btn::after,
.workshop-craft-btn::after,
#forge-modal .forge-menu-btn::after,
#forge-modal .forge-back-btn::after,
#forge-modal .forge-upgrade-btn::after,
#forge-modal .forge-dismantle-btn::after,
#forge-modal #forge-rank-absorb-btn::after,
.dungeon-entry-btn::after,
.bm-fight-btn::after,
.bm-cancel-btn::after,
.arena-escape-btn::after,
.skills-modal-close-btn::after,
.modal-close-btn::after,
.close-modal::after,
.trade-modal-content:not(.item-info-modal-content)
.trade-yes-btn::after,
.trade-modal-content:not(.item-info-modal-content)
.trade-no-btn::after {
    content: "";

    position: absolute;
    inset:
        var(--orbis-frame-inset);

    z-index: 3;
    pointer-events: none;
    box-sizing: border-box;

    border:
        var(--orbis-frame-size)
        solid
        transparent;

    border-image:
        url("assets/ui/frame-bronze.svg")
        24 /
        var(--orbis-frame-size) /
        0
        stretch;
}

/* =========================================
   TABS
   ========================================= */

.ext-tab-btn,
.inventory-tab-btn,
.workshop-tab-btn,
.personal-storage-tabs button {
    --orbis-frame-size: 8px;

    color:
        #d6c29d;

    background:
        linear-gradient(
            180deg,
            #49301f 0%,
            #2b1b12 52%,
            #18100b 100%
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,233,178,.11),
        inset 0 -2px 3px
        rgba(0,0,0,.36),
        0 2px 4px
        rgba(33,18,10,.25);
}

.ext-tab-btn.active,
.inventory-tab-btn.active,
.workshop-tab-btn.active,
.personal-storage-tabs button.active {
    color:
        var(--orbis-button-gold-light);

    background:
        radial-gradient(
            ellipse at 50% -25%,
            rgba(255,222,137,.20),
            transparent 58%
        ),
        linear-gradient(
            180deg,
            #76502b 0%,
            #4b301c 51%,
            #29180f 100%
        );

    box-shadow:
        inset 0 0 7px
        rgba(209,155,57,.13),
        inset 0 -2px 4px
        rgba(0,0,0,.30),
        0 2px 5px
        rgba(42,24,12,.27);
}

/* =========================================
   FORGE — large menu buttons
   ========================================= */

#forge-modal .forge-menu-btn {
    --orbis-frame-size: 13px;
    --orbis-frame-inset: 1px;

    min-height:
        58px;

    clip-path:
        none;

    color:
        #f7e3b5;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,221,139,.13),
            transparent
        )
        top 3px center /
        calc(100% - 42px) 1px
        no-repeat,

        radial-gradient(
            ellipse at 50% -20%,
            rgba(255,223,146,.21),
            transparent 62%
        ),

        linear-gradient(
            180deg,
            #5a3a24 0%,
            #382317 44%,
            #24160f 64%,
            #160d09 100%
        );

    font-size:
        15px;

    letter-spacing:
        .015em;

    box-shadow:
        inset 0 2px 0
        rgba(255,237,188,.13),
        inset 0 -3px 5px
        rgba(0,0,0,.43),
        0 3px 6px
        rgba(44,24,12,.28);
}

#forge-modal .forge-menu-btn:active {
    transform:
        translateY(1px);

    filter:
        brightness(1.10);
}

/* Back button: compact Orbis frame. */
#forge-modal .forge-back-btn {
    --orbis-frame-size: 8px;

    color:
        #f1dcae;

    background:
        linear-gradient(
            180deg,
            #51331f,
            #27180f
        );

    text-shadow:
        0 1px 2px
        rgba(0,0,0,.75);
}

/* Upgrade / rank / dismantle confirmations. */
#forge-modal .forge-upgrade-btn,
#forge-modal .forge-dismantle-btn,
#forge-modal #forge-rank-absorb-btn {
    --orbis-frame-size: 9px;

    min-height:
        38px;

    clip-path:
        none;

    color:
        #f4e3bd;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(222,188,96,.10),
            transparent
        )
        top 2px center /
        calc(100% - 34px) 1px no-repeat,

        radial-gradient(
            ellipse at 50% -25%,
            rgba(182,205,112,.12),
            transparent 60%
        ),

        linear-gradient(
            180deg,
            #485135 0%,
            #313a26 47%,
            #202719 67%,
            #15180f 100%
        );

    font-family:
        inherit;

    font-weight:
        800;

    text-shadow:
        0 1px 2px
        rgba(0,0,0,.86);

    box-shadow:
        inset 0 1px 0
        rgba(255,237,189,.13),
        inset 0 -3px 5px
        rgba(0,0,0,.39),
        0 2px 5px
        rgba(41,23,12,.24);
}

#forge-modal .forge-upgrade-btn:disabled,
#forge-modal .forge-dismantle-btn:disabled,
#forge-modal #forge-rank-absorb-btn:disabled {
    color:
        #a8997f;

    background:
        linear-gradient(
            180deg,
            #4b4438,
            #302b24 52%,
            #201d18
        );

    opacity:
        .72;

    filter:
        saturate(.55);
}

/* =========================================
   CONFIRM / ACTION BUTTONS OUTSIDE FORGE
   ========================================= */

.workshop-craft-btn,
.dungeon-entry-btn,
.bm-fight-btn,
.trade-modal-content:not(.item-info-modal-content)
.trade-yes-btn {
    background:
        radial-gradient(
            ellipse at 50% -25%,
            rgba(185,203,110,.10),
            transparent 58%
        ),
        linear-gradient(
            180deg,
            #465137,
            #303b27 52%,
            #1b2416
        );

    color:
        #f2e2bd;
}

.workshop-craft-btn:disabled,
.dungeon-entry-btn:disabled,
.trade-modal-content:not(.item-info-modal-content)
.trade-yes-btn:disabled {
    background:
        linear-gradient(
            180deg,
            #575147,
            #39342d
        );

    color:
        #b7aa94;

    opacity:
        .70;
}

/* Secondary / cancel actions. */
.inventory-expand-btn,
.stats-reset-btn,
.bm-cancel-btn,
.arena-escape-btn,
.skills-modal-close-btn,
.modal-close-btn,
.close-modal,
.trade-modal-content:not(.item-info-modal-content)
.trade-no-btn {
    background:
        radial-gradient(
            ellipse at 50% -25%,
            rgba(255,222,141,.11),
            transparent 58%
        ),
        linear-gradient(
            180deg,
            #573822,
            #342116 52%,
            #1c110c
        );

    color:
        #eedab0;
}

/* =========================================
   MODAL CORNER CLOSE
   ========================================= */

.modal-corner-close {
    --orbis-frame-size: 7px;
    --orbis-frame-inset: 0px;

    left:
        auto !important;

    right:
        7px !important;

    inset-inline-start:
        auto !important;

    inset-inline-end:
        7px !important;

    position:
        absolute;

    isolation:
        isolate;

    overflow:
        hidden;

    box-sizing:
        border-box;

    width:
        32px;

    height:
        32px;

    border:
        1px solid
        #a56c29;

    border-radius:
        0;

    color:
        #f7e4bc;

    background:
        radial-gradient(
            circle at 50% -15%,
            rgba(255,224,149,.17),
            transparent 58%
        ),
        linear-gradient(
            180deg,
            #5a3a24,
            #332116 52%,
            #1b110c
        );

    text-shadow:
        0 1px 2px
        rgba(0,0,0,.88);

    box-shadow:
        inset 0 -2px 3px
        rgba(0,0,0,.35),
        0 2px 5px
        rgba(38,22,12,.34);
}

.modal-corner-close::after {
    content: "";

    position:
        absolute;

    inset:
        var(--orbis-frame-inset);

    z-index:
        3;

    pointer-events:
        none;

    box-sizing:
        border-box;

    border:
        var(--orbis-frame-size)
        solid
        transparent;

    border-image:
        url("assets/ui/frame-bronze.svg")
        24 /
        var(--orbis-frame-size) /
        0
        stretch;
}

.modal-corner-close:active {
    transform:
        translateY(1px);

    filter:
        brightness(1.08);
}


/* =========================================
   ITEM INFO — FIXED FRAME + INNER SCROLL
   Рамка нерухома; прокручується лише
   текстова область, як у mob-info modal.
   ========================================= */

.item-info-modal-content {
    height: min(90vh, 760px);
    max-height: 90vh;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;
}

.item-info-modal-content
.item-modal-art-slot,
.item-info-modal-content
.tm-title-style {
    flex: 0 0 auto;
}

/* Характеристики, опис, сет і порівняння. */
.item-info-modal-content
.tm-question-style {
    flex: 1 1 auto;
    min-height: 0;

    margin-bottom: 0;
    padding-right: 4px;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-width: thin;
}

/* Кнопки не прокручуються разом із текстом. */
.item-info-modal-content
.trade-buttons-row {
    position: relative;
    bottom: auto;

    flex: 0 0 auto;

    margin-top: 4px;
    padding-top: 4px;
}

/* Старий запас під sticky-кнопки більше не потрібен. */
.item-info-modal-content
.item-info-body {
    padding-bottom: 10px;
}

/* Scrollbar Android / Chromium — як у вікні моба. */
.item-info-modal-content
.tm-question-style::-webkit-scrollbar {
    width: 4px;
}

.item-info-modal-content
.tm-question-style::-webkit-scrollbar-thumb {
    background:
        rgba(94,61,31,.45);

    border-radius: 4px;
}

@media (max-height: 700px) {
    .item-info-modal-content {
        height: 90vh;
    }

    .item-info-modal-content
    .item-info-body {
        padding-bottom: 8px;
    }
}


/* =========================================
   FORGE — ELEMENTAL ENCHANTING
   ========================================= */

#forge-modal .forge-enchant-info {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(163, 126, 63, 0.55);
    background: rgba(20, 16, 12, 0.72);
}

#forge-modal .forge-enchant-item-name {
    margin-bottom: 8px;
    text-align: center;
    font-weight: 700;
}

#forge-modal .forge-enchant-current,
#forge-modal .forge-enchant-cost {
    margin: 8px 0;
    text-align: center;
}

#forge-modal .forge-enchant-rune-grid {
    margin-top: 8px;
    margin-bottom: 8px;
}

#forge-modal .forge-rune-slot {
    position: relative;
}

#forge-modal .forge-rune-slot.is-selected {
    outline: 2px solid rgba(220, 184, 98, 0.9);
    outline-offset: -2px;
}

#forge-modal .forge-rune-count {
    position: absolute;
    right: 3px;
    bottom: 2px;
    min-width: 16px;
    padding: 1px 3px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.78);
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
}


/* =========================================
   INVENTORY SORT / DRAG / ITEM META
   ========================================= */

.inventory-sort-btn {
    white-space: nowrap;
}

.bag-slot,
.equip-slot {
    position: relative;
}

.bag-slot.inventory-draggable {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

.bag-slot.inventory-drag-source {
    opacity: .42;
}

.inventory-drag-ghost {
    position: fixed !important;
    z-index: 12000 !important;
    left: 0;
    top: 0;
    margin: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) scale(1.05);
    opacity: .92;
    box-shadow:
        0 7px 18px rgba(0, 0, 0, .48) !important;
}

.inventory-drag-target {
    outline: 2px solid rgba(255, 224, 146, .95) !important;
    outline-offset: -2px;
    filter: brightness(1.15);
}

.inventory-drag-invalid {
    outline: 2px solid rgba(207, 68, 54, .95) !important;
    outline-offset: -2px;
}

body.inventory-dragging {
    -webkit-user-select: none;
    user-select: none;
}

.item-slot-meta,
.personal-storage-meta {
    position: absolute;
    left: 13%;
    bottom: 12%;
    z-index: 3;

    margin: 0;
    padding: 1px 3px;

    border-radius: 3px;
    background: rgba(16, 11, 8, .72);

    color: #fff1cf;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 1),
        0 0 2px rgba(0, 0, 0, .95);

    pointer-events: none;
}

.item-info-warning {
    margin-top: 9px;
    padding: 7px 8px;

    border:
        1px solid
        rgba(151, 87, 42, .55);

    background:
        rgba(101, 49, 28, .12);

    color: #63351f;
    font-weight: 700;
    line-height: 1.35;
}


/* =========================================
   STARTUP / MAIN MENU
   ========================================= */
body.startup-active {
    overflow: hidden;
}

.startup-screen {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    min-height: 100%;
    overflow-y: auto;
    background:
        #06101f
        url("assets/ui/branding/orbis-splash.jpg")
        center / cover
        no-repeat;
}

.startup-screen-shade {
    min-height: 100%;
    padding: 24px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            180deg,
            rgba(5, 10, 18, .48),
            rgba(5, 10, 18, .82)
        );
}

.startup-card {
    width: min(100%, 430px);
    padding: 22px 18px 20px;
    color: #f5e5bd;
    background:
        linear-gradient(
            180deg,
            rgba(45, 29, 18, .94),
            rgba(18, 12, 9, .97)
        );
    border: 2px solid var(--fantasy-gold);
    box-shadow:
        inset 0 0 0 1px #74502b,
        0 12px 34px rgba(0, 0, 0, .72);
}

.startup-title {
    margin: 0 0 10px;
    text-align: center;
    color: #f3d58a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(26px, 8vw, 38px);
    line-height: 1.08;
    text-shadow:
        0 2px 2px #000,
        0 0 10px rgba(217, 167, 73, .26);
}

.startup-subtitle,
.startup-text,
.startup-lore,
.startup-hint {
    margin: 0 0 14px;
    text-align: center;
    line-height: 1.48;
}

.startup-subtitle {
    color: #cdbb91;
    font-size: 14px;
}

.startup-text {
    color: #ead9b4;
    font-size: 15px;
}

.startup-lore {
    min-height: 150px;
    display: flex;
    align-items: center;
    color: #f1dfb9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.62;
    text-align: left;
    white-space: pre-line;
}

.startup-hint {
    margin-top: 10px;
    color: #ad9b77;
    font-size: 12px;
}

.startup-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 16px;
}

.startup-button {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    color: #ffe4a2;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-weight: 700;
    background:
        linear-gradient(
            180deg,
            #68451f,
            #322010
        );
    border: 1px solid #c99845;
    box-shadow:
        inset 0 0 0 1px rgba(255, 224, 153, .12),
        0 3px 7px rgba(0, 0, 0, .4);
    cursor: pointer;
}

.startup-button.secondary {
    color: #d8c7a0;
    background:
        linear-gradient(
            180deg,
            #443020,
            #211711
        );
    border-color: #76583a;
}

.startup-button:disabled {
    opacity: .38;
    cursor: default;
    filter: grayscale(.35);
}

.startup-button:not(:disabled):active {
    transform: translateY(1px);
    filter: brightness(1.12);
}

.startup-skip {
    width: 100%;
    margin-top: 14px;
    padding: 8px;
    color: #ad9b77;
    background: transparent;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.startup-page-count {
    margin-top: 4px;
    text-align: center;
    color: #a9946a;
    font-size: 12px;
}

.startup-name-input {
    display: block;
    width: 100%;
    min-height: 50px;
    margin-top: 10px;
    padding: 10px 12px;
    color: #f6e7c5;
    font-size: 17px;
    text-align: center;
    background: rgba(9, 10, 12, .78);
    border: 1px solid #a77d3c;
    outline: none;
}

.startup-name-input:focus {
    border-color: #e0b454;
    box-shadow:
        0 0 0 2px rgba(224, 180, 84, .17);
}

.startup-error {
    min-height: 20px;
    margin-top: 7px;
    color: #ef9f8d;
    font-size: 12px;
    text-align: center;
}

.startup-summary,
.startup-setting-row {
    margin: 14px 0;
    padding: 12px 14px;
    color: #ead9b4;
    background: rgba(8, 10, 13, .5);
    border: 1px solid rgba(201, 152, 69, .52);
}

.startup-summary {
    display: grid;
    gap: 8px;
    text-align: center;
}

.startup-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.startup-setting-row strong {
    color: #f0cf82;
}

@media (max-width: 360px) {
    .startup-screen-shade {
        padding: 12px 9px;
    }

    .startup-card {
        padding: 18px 14px 16px;
    }

    .startup-lore {
        min-height: 130px;
        font-size: 15px;
    }
}


/* =========================================
   STARTUP BRAND TRANSITION — v1
   Splash palette: blue / cyan / gold.
   ========================================= */
.startup-screen {
    background:
        #06101f
        url("assets/ui/branding/orbis-splash.jpg")
        center / cover
        no-repeat;
}

.startup-screen::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(3, 16, 35, .02) 0%,
            rgba(3, 16, 35, .03) 42%,
            rgba(2, 11, 28, .16) 62%,
            rgba(2, 8, 22, .45) 100%
        );
}

.startup-screen-shade {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    padding:
        max(18px, env(safe-area-inset-top))
        18px
        max(26px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    background: transparent;
}

.startup-card {
    position: relative;
    z-index: 3;
    width: min(100%, 430px);
    margin-bottom: 2svh;
    padding: 10px 6px 8px;
    color: #f8e8b3;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 0;
    transform: translateY(14svh);
    transition:
        transform .72s cubic-bezier(.2, .72, .22, 1) .22s,
        opacity .48s ease .22s;
}

.startup-screen.is-ready .startup-card {
    opacity: 1;
    transform: translateY(0);
}

.startup-title {
    color: #ffe29a;
    text-shadow:
        0 2px 3px #001127,
        0 0 12px rgba(73, 193, 255, .42),
        0 0 20px rgba(236, 185, 68, .22);
}

.startup-subtitle {
    color: #ccecff;
    text-shadow: 0 2px 4px #001020;
}

.startup-text {
    color: #edf7ff;
    text-shadow: 0 2px 4px #001020;
}

.startup-hint {
    color: #b8d6e8;
    text-shadow: 0 2px 4px #001020;
}

.startup-lore {
    color: #f4f8ff;
    background:
        linear-gradient(
            180deg,
            rgba(5, 27, 55, .78),
            rgba(3, 14, 34, .88)
        );
    border: 1px solid rgba(239, 192, 77, .72);
    box-shadow:
        inset 0 0 18px rgba(43, 178, 255, .09),
        0 7px 20px rgba(0, 5, 18, .42);
}

.startup-button,
.startup-button.secondary {
    position: relative;
    overflow: hidden;
    color: #ffe8a9;
    background:
        linear-gradient(
            180deg,
            rgba(18, 66, 105, .94),
            rgba(4, 25, 56, .97)
        );
    border: 1px solid #e0b24d;
    border-radius: 4px;
    box-shadow:
        inset 0 0 0 1px rgba(112, 214, 255, .18),
        inset 0 0 18px rgba(30, 171, 238, .12),
        0 4px 12px rgba(0, 7, 24, .48);
    text-shadow:
        0 1px 2px #001020,
        0 0 8px rgba(255, 211, 99, .22);
}

.startup-button.secondary {
    color: #d9efff;
    border-color: #b9954d;
}

.startup-button::before {
    content: "";
    position: absolute;
    inset: 3px;
    pointer-events: none;
    border: 1px solid rgba(255, 222, 135, .18);
}

.startup-button:not(:disabled):active {
    filter: brightness(1.18);
    box-shadow:
        inset 0 0 22px rgba(74, 199, 255, .2),
        0 2px 8px rgba(0, 7, 24, .5);
}

.startup-name-input {
    color: #f6faff;
    background: rgba(3, 20, 48, .9);
    border-color: #d9ad4a;
    box-shadow:
        inset 0 0 14px rgba(48, 184, 244, .1);
}

.startup-name-input:focus {
    border-color: #ffe08b;
    box-shadow:
        0 0 0 2px rgba(62, 190, 255, .2),
        inset 0 0 16px rgba(48, 184, 244, .13);
}

.startup-summary,
.startup-setting-row {
    color: #edf7ff;
    background:
        linear-gradient(
            180deg,
            rgba(8, 39, 75, .86),
            rgba(3, 18, 43, .9)
        );
    border-color: rgba(225, 179, 75, .74);
    box-shadow:
        inset 0 0 16px rgba(45, 181, 245, .08);
}

.startup-setting-row strong,
.startup-page-count {
    color: #ffe09a;
}

.startup-skip {
    color: #b9def3;
    text-shadow: 0 2px 4px #001020;
}

@media (max-width: 360px) {
    .startup-card {
        margin-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .startup-card {
        transition-duration: .01ms;
        transition-delay: 0ms;
    }
}


/* =========================================
   STARTUP — CHARACTER SLOTS
   ========================================= */
.startup-character-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 4px;
}

.startup-character-card {
    position: relative;
    min-height: 82px;
    background:
        linear-gradient(
            180deg,
            rgba(9, 43, 81, .91),
            rgba(3, 19, 45, .95)
        );
    border: 1px solid #d8ab48;
    border-radius: 4px;
    box-shadow:
        inset 0 0 0 1px rgba(92, 205, 255, .13),
        inset 0 0 18px rgba(40, 164, 225, .08),
        0 4px 12px rgba(0, 6, 23, .46);
    overflow: hidden;
}

.startup-character-card.is-empty {
    border-style: dashed;
    border-color: rgba(215, 177, 87, .72);
}

.startup-character-main {
    width: 100%;
    min-height: 82px;
    padding: 8px 44px 8px 9px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: #f4e5b4;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.startup-character-main:not(:disabled):active {
    background:
        rgba(57, 166, 224, .1);
}

.startup-character-main.is-view-only {
    cursor: default;
    opacity: .78;
}

.startup-character-portrait {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(75, 190, 247, .2),
            rgba(3, 18, 43, .82)
        );
    border: 1px solid rgba(231, 188, 82, .78);
    box-shadow:
        inset 0 0 10px rgba(63, 193, 255, .12);
}

.startup-character-portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.startup-character-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.startup-character-name {
    overflow: hidden;
    color: #ffe39a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow:
        0 1px 2px #001020,
        0 0 8px rgba(255, 209, 92, .16);
}

.startup-character-meta {
    color: #c8e8fa;
    font-size: 13px;
    line-height: 1.35;
}

.startup-character-delete {
    position: absolute;
    z-index: 2;
    top: 7px;
    right: 7px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #ffc6b7;
    font-size: 22px;
    line-height: 1;
    background:
        rgba(58, 17, 23, .72);
    border:
        1px solid
        rgba(222, 137, 111, .72);
    border-radius: 4px;
    cursor: pointer;
}

.startup-character-delete:active {
    filter: brightness(1.18);
}

.startup-character-card.is-empty
.startup-character-main {
    padding-right: 9px;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}

.startup-character-empty-icon {
    color: #ffe090;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    line-height: 1;
    text-shadow:
        0 0 10px rgba(72, 196, 255, .35);
}

.startup-character-empty-label {
    color: #e7f5ff;
    font-size: 15px;
    font-weight: 700;
}

.startup-character-empty-sub {
    color: #9ccbe4;
    font-size: 12px;
}

@media (max-height: 690px) {
    .startup-character-card,
    .startup-character-main {
        min-height: 70px;
    }

    .startup-character-portrait {
        flex-basis: 54px;
        width: 54px;
        height: 54px;
    }
}


/* =========================================
   GAME EXIT CONFIRM
   ========================================= */
.top-menu-exit {
    margin-top: 4px;
    color: #ffe09a;
    border-top: 1px solid rgba(214, 168, 69, .35);
}

.game-exit-confirm {
    position: fixed;
    z-index: 12000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 8, 20, .76);
    backdrop-filter: blur(3px);
}

.game-exit-confirm-panel {
    width: min(100%, 420px);
    padding: 22px 18px 18px;
    text-align: center;
    color: #eef8ff;
    background:
        linear-gradient(
            180deg,
            rgba(8, 47, 84, .97),
            rgba(3, 18, 43, .98)
        );
    border: 1px solid #d8ab48;
    box-shadow:
        inset 0 0 0 1px rgba(90, 201, 255, .16),
        0 12px 35px rgba(0, 0, 0, .58);
}

.game-exit-confirm-panel h2 {
    margin: 0 0 12px;
    color: #ffe39a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
}

.game-exit-confirm-panel p {
    margin: 0 0 18px;
    color: #d6edf9;
    font-size: 16px;
    line-height: 1.45;
}

.game-exit-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* =========================================
   STARTUP SETTINGS / GAME TIP TOAST
   ========================================= */
.startup-setting-toggle {
    min-width: 104px;
    padding: 7px 10px;
    color: #ffe39a;
    font: inherit;
    font-weight: 700;
    background:
        linear-gradient(
            180deg,
            rgba(19, 68, 107, .94),
            rgba(4, 27, 58, .97)
        );
    border: 1px solid #d8ab48;
    border-radius: 4px;
    box-shadow:
        inset 0 0 0 1px rgba(95, 207, 255, .13);
    cursor: pointer;
}

.startup-setting-toggle:active {
    filter: brightness(1.15);
}

.game-tip-toast {
    position: fixed;
    z-index: 11500;
    top:
        max(
            64px,
            calc(
                env(safe-area-inset-top) +
                54px
            )
        );
    left: 50%;
    width: min(
        calc(100% - 28px),
        460px
    );
    padding: 12px 14px;
    color: #eff9ff;
    font-size: 14px;
    line-height: 1.42;
    text-align: center;
    background:
        linear-gradient(
            180deg,
            rgba(8, 47, 84, .97),
            rgba(3, 18, 43, .98)
        );
    border: 1px solid #d8ab48;
    border-radius: 5px;
    box-shadow:
        inset 0 0 0 1px rgba(91, 204, 255, .14),
        0 7px 22px rgba(0, 4, 16, .5);
    pointer-events: none;
    opacity: 0;
    transform:
        translate(
            -50%,
            -12px
        );
    transition:
        opacity .2s ease,
        transform .2s ease;
}

.game-tip-toast.is-visible {
    opacity: 1;
    transform:
        translate(
            -50%,
            0
        );
}

@media (prefers-reduced-motion: reduce) {
    .game-tip-toast {
        transition-duration: .01ms;
    }
}