* {
    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(3,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,
.orbis-nav-panel {

    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,
.orbis-nav-panel,
#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,
.orbis-nav-panel,
#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-coins-bar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin:8px 0 12px;
    padding:8px 12px;
    color:#3c2817;
    background:rgba(244,222,176,.88);
    border:1px solid #9b6d32;
    font-size:14px;
}
#forge-modal .forge-coins-bar b {
    font-variant-numeric:tabular-nums;
}

#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:not(.item-info-has-back) .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;

    /* Keep the scroll area above the decorative frame's lower edge. */
    padding-bottom: clamp(48px, 8vh, 68px);

    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;
    min-width: 0;
    max-width: 100%;

    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;
    }
}


/* Account login uses the established startup card and color palette. */
.startup-account {
    width: 100%;
}
.startup-account-form {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 12px;
}
.startup-account-label {
    display: block;
    color: #f2daab;
    font-size: 14px;
    line-height: 1.35;
}
.startup-account-input {
    text-align: left;
    margin-top: 6px;
    border-radius: 4px;
}
.startup-account-identity {
    overflow-wrap: anywhere;
    margin: 10px 0;
    color: #f4d997;
    font-weight: 700;
    text-align: center;
}
.startup-account-status {
    min-height: 32px;
    margin: 12px 0 0;
    color: #b9e2fb;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}
.startup-account .startup-hint {
    margin: 8px 0;
}


/* Read-only account character slot preview. No selectable characters yet. */
.startup-account-slots {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 10px 0;
    max-height: min(38vh, 245px);
    overflow-y: auto;
    padding: 9px;
    border: 1px solid rgba(211, 167, 77, .52);
    background: rgba(8, 22, 40, .48);
}
.startup-account-slots-heading {
    font: bold 19px Georgia, serif;
    color: #f3d58a;
    margin: 1px 0 8px;
    text-align: center;
}
.startup-account-slot {
    padding: 10px 11px;
    font-size: 14px;
    color: #ebd6a7;
    background: rgba(9, 34, 61, .8);
    border: 1px solid rgba(117, 173, 206, .35);
    overflow-wrap: anywhere;
}


/* Disabled-by-default local archive staging, intentionally no overlay. */
.startup-local-archive .startup-account-slots {
    max-height: min(34vh, 220px);
}
.startup-local-archive .startup-account-label {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 8px 4px;
}
.startup-local-archive .startup-account-label input {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    accent-color: #ddad49;
}

/* Social: mobile log composer, friend panel, city presence. */
#city-presence{margin:8px 4px 0;text-align:center;font-size:13px;font-weight:600;color:#59401e}
#city-presence[hidden],#social-composer[hidden],#social-friends-panel[hidden]{display:none!important}
#game-log-shell:not(.expanded) #social-composer,#game-log-shell:not(.expanded) #social-friends-panel{display:none!important}
#social-composer{display:flex;align-items:center;gap:5px;padding:6px;background:#251b15;border-top:1px solid #81592d}
#social-composer input{flex:1;min-width:0;border:1px solid #926b42;border-radius:5px;background:#17100b;color:#ffebca;padding:8px;font-size:14px}
#social-composer button,#social-friends-panel button{cursor:pointer;border:1px solid #886235;background:#4e3320;color:#f4dda8;border-radius:5px;padding:7px 9px;font:inherit}
#social-composer button:disabled{opacity:.45;cursor:default}
#social-friends-panel{position:absolute;inset:31px 0 0;z-index:8;overflow:auto;background:#24170f;color:#f2dec0;padding:10px;border:1px solid #967044}
.social-panel-head{display:flex;justify-content:space-between;align-items:center;gap:6px;padding-bottom:8px}
#social-panel-body{display:flex;flex-direction:column;gap:8px}
#social-panel-body input{width:100%;max-width:100%;border:1px solid #886235;background:#16110d;color:#f4e7d2;padding:8px;border-radius:4px}
.social-friend-row{display:flex;justify-content:space-between;align-items:center;gap:6px;border-bottom:1px solid #57402a;padding:6px 0}
.social-friend-row span{min-width:0;word-break:break-word;font-size:13px}
.social-friend-actions{display:flex;gap:4px;flex-shrink:0}
.social-panel-note{font-size:13px;line-height:1.4;color:#ebc68d}
#game-log .social-msg{padding:4px 8px;line-height:1.35;overflow-wrap:anywhere;color:#f2dfb8;font-size:13px}
#game-log .social-msg[hidden]{display:none!important}
#game-log .social-msg b{font-weight:600;color:#ffd47e}
#game-log .social-msg time{font-size:11px;color:#bba78b;margin-right:4px}
#game-log .social-status{padding:6px 9px;font-size:13px;color:#cdb98f}
#game-log .social-status[hidden]{display:none!important}

/* Website Android download: a real anchor, styled like the existing menu. */
a.startup-download-apk {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}
a.startup-download-apk[hidden] {
    display: none;
}

/* Already-installed Android TWA/PWA must not offer another APK download. */
@media (display-mode: standalone), (display-mode: fullscreen) {
    a.startup-download-apk {
        display: none !important;
    }
}


/* Orders use the same inventory parchment surface, trim and buttons. */
#orders-journal-content,.orbis-orders-panel{color:var(--fantasy-text-dark);font-family:Georgia,"Times New Roman",serif}
.orbis-order-card{margin:12px 0;padding:13px;border:var(--fantasy-border);border-radius:var(--fantasy-radius);background:linear-gradient(135deg,var(--fantasy-paper-light),var(--fantasy-paper));box-shadow:inset 0 0 12px rgba(95,59,25,.12)}
.orbis-order-card h3{font-size:17px;margin:0 0 8px;color:#382718}
.orbis-order-card p{font-size:14px;line-height:1.55;margin:0 0 12px}
.orbis-order-card .inventory-tab-btn{min-height:42px;width:100%;font-size:14px}
.orbis-orders-overlay[hidden]{display:none!important}
.orbis-orders-overlay{position:fixed;inset:0;z-index:2100;display:flex;align-items:center;justify-content:center;background:rgba(14,15,23,.82);padding:12px}
.orbis-orders-panel{width:min(100%,580px);max-height:92dvh;overflow:auto;border:var(--fantasy-border);border-radius:var(--fantasy-radius);padding:16px;background:linear-gradient(135deg,var(--fantasy-paper-light),var(--fantasy-paper));box-shadow:inset 0 0 0 2px rgba(88,54,24,.28),0 12px 36px #0008}
.orbis-orders-panel>.inventory-tab-btn{width:100%;min-height:46px}

/* Tier controls and long quest text stay inside narrow parchment cards. */
.orbis-orders-panel,.orbis-order-card{box-sizing:border-box;min-width:0;overflow-wrap:anywhere}
.orbis-orders-overlay{overscroll-behavior:contain}
.orbis-orders-panel{max-height:calc(100dvh - 24px);overscroll-behavior:contain}
.orbis-order-card h3{line-height:1.35}
.orbis-orders-tier{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;font-size:14px}
.orbis-orders-tier select{min-height:44px;max-width:60%;padding:8px 12px;color:var(--fantasy-text-dark);border:var(--fantasy-border);border-radius:6px;background:var(--fantasy-paper-light);font:inherit}
.orbis-orders-tier select:focus-visible,.orbis-order-card button:focus-visible{outline:2px solid #75502b;outline-offset:2px}
.orbis-order-card .orbis-orders-hint{font-size:13px;color:#5a4634}
.orbis-order-card button:disabled{opacity:.6;cursor:default}
@media(max-width:360px){.orbis-orders-panel{padding:12px}.orbis-order-card{padding:10px}.orbis-order-card h3{font-size:16px}}

.orbis-orders-panel{background-image:url("assets/ui/paper-texture.svg"),linear-gradient(145deg,var(--fantasy-paper-light),var(--fantasy-paper));background-repeat:repeat,no-repeat;border:8px solid transparent;border-image:url("assets/ui/frame-bronze.svg") 24 / 8px / 0 stretch}
.orbis-orders-panel{position:relative;display:flex;flex-direction:column;overflow:hidden}
.orbis-orders-panel>.inv-main-title{flex:0 0 auto;padding-right:32px}
#orbis-orders-board-body{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.orbis-orders-gather-result{margin:0;padding:10px 12px;text-align:center;color:var(--fantasy-text-dark);background:var(--fantasy-paper-light);border:var(--fantasy-border);border-radius:var(--fantasy-radius);font:700 14px/1.4 Georgia,"Times New Roman",serif;overflow-wrap:anywhere}

/* Compact section tabs share the inventory button surface. */
.orbis-section-tabs{display:grid;gap:5px;margin:0 0 16px;min-width:0;width:100%}
.orbis-character-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.orbis-journal-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.orbis-section-tabs .inventory-tab-btn{box-sizing:border-box;min-width:0;min-height:44px;width:100%;padding:6px 2px;font:700 clamp(9px,2.6vw,14px)/1.25 Georgia,serif;white-space:normal;overflow-wrap:normal}
.orbis-section-tabs .inventory-tab-btn.active{color:#fff1be;filter:brightness(1.25);box-shadow:inset 0 -3px 0 #c99536}
.orbis-section-tabs button:focus-visible{outline:2px solid #b37d27;outline-offset:2px}
[data-journal-pane][hidden]{display:none!important}
#achievements-modal.journal-embedded,#dungeon-seals-modal.journal-embedded{position:static;inset:auto;display:block;width:100%;padding:0;background:none;z-index:auto}
#achievements-modal.journal-embedded[hidden]{display:none!important}
.journal-embedded .achievement-panel,.journal-embedded .dungeon-modal-content{box-sizing:border-box;max-width:none;width:100%;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--fantasy-text-dark);overflow:visible}
.journal-embedded .achievement-panel header{padding:0 0 10px;margin-bottom:10px;border-bottom:1px solid #b99653;justify-content:center}
.journal-embedded [data-ach-close],.journal-embedded .modal-corner-close,.journal-embedded .close-modal{display:none}
.journal-embedded #achievement-body{padding:0;overflow:visible}
.journal-embedded .achievement-summary,.journal-embedded .achievement-card,.journal-embedded .achievement-region{background:rgba(164,112,41,.08);border-color:#ad8d56;color:var(--fantasy-text-dark)}
.journal-embedded .achievement-summary small,.journal-embedded .achievement-species small,.journal-embedded .achievement-card span{color:#5b482f}
.journal-embedded .achievement-name,.journal-embedded .achievement-card b{color:#3b2918}
.orbis-order-card .orbis-order-difficulty,.orbis-order-card .orbis-order-progress{margin:0 0 8px}
.orbis-order-rewards{margin:10px 0 14px}
.orbis-order-rewards p{margin:4px 0}

/* Resource and recipe links share the parchment item context. */
.workshop-resource-link{
 background:none;border:0;color:inherit;font:inherit;text-align:left;
 text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:5px 0;
 min-height:36px;min-width:0;overflow-wrap:anywhere;
}
#trade-modal-bg.item-info-has-back .trade-no-btn{min-height:44px}
.resource-recipe-list{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;margin-top:10px;min-width:0}
.resource-recipe-link{
 display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;
 width:100%;min-width:0;min-height:44px;padding:8px;
 border:1px solid rgba(91,55,28,.35);border-radius:5px;
 background:rgba(255,247,224,.35);color:#4a2b12;font:inherit;
 text-align:left;cursor:pointer;overflow-wrap:anywhere;
}
.resource-recipe-link > span,.resource-recipe-link small{min-width:0;max-width:100%}
.resource-recipe-link small{font-size:.8em}
.workshop-resource-link:focus-visible,.resource-recipe-link:focus-visible{
 outline:2px solid #98691d;outline-offset:2px;
}

/* Orbis Celestial — chat-only preview.
   Scoped to the journal + friends UI; the rest of Orbis RPG keeps its
   existing wooden/golden theme until the owner approves a full redesign.
   Reversible in one block: no layout, save, or networking changes. */
#game-log-shell {
    --orbis-chat-night: #091b34;
    --orbis-chat-panel: #103356;
    --orbis-chat-sapphire: #225b93;
    --orbis-chat-teal: #55c7d9;
    --orbis-chat-indigo: #181f4e;
    --orbis-chat-champagne: #f3dda7;
    --orbis-chat-sky: #66c7fa;
    --orbis-chat-ivory: #f0f8ff;
    --orbis-chat-white-gold: #f0ddb5;
    --orbis-chat-muted: #b3cde2;
    --orbis-chat-edge: rgba(177, 216, 245, .38);
    color: var(--orbis-chat-ivory);
    background:
        radial-gradient(ellipse at 95% 0%, rgba(105, 205, 242, .17), transparent 52%),
        linear-gradient(150deg, #285781 0%, #18365b 42%, #0b1b37 100%);
    border: 1px solid var(--orbis-chat-edge);
    border-image: none;
    border-radius: 13px 13px 0 0;
    box-shadow: 0 -7px 28px rgba(3, 10, 27, .38),
        inset 0 1px 0 rgba(240, 248, 255, .21);
}

#game-log-shell #game-log-toggle {
    min-height: 36px;
    padding: 5px 13px;
    color: var(--orbis-chat-white-gold);
    background:
        linear-gradient(90deg, rgba(244, 214, 154, .09), transparent 46%),
        linear-gradient(100deg, #234976, #11294b 68%, #151f42);
    border: 0;
    border-bottom: 1px solid rgba(198, 226, 245, .22);
    font: 700 14px/1.35 Georgia, "Times New Roman", serif;
    letter-spacing: .025em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
#game-log-shell #game-log-toggle-icon {
    color: var(--orbis-chat-sky);
    font-size: 13px;
}

#game-log-shell #game-log-menu {
    gap: 5px;
    padding: 7px;
    background: linear-gradient(90deg, #132f52, #1b2a54 63%, #0d2547);
    border-color: rgba(198, 226, 245, .16);
}
#game-log-shell .game-log-channel-btn {
    min-height: 36px;
    padding: 7px 2px;
    border: 1px solid rgba(153, 198, 227, .28);
    border-radius: 7px;
    background: linear-gradient(165deg, #21496c, #142c51);
    color: var(--orbis-chat-muted);
    font: 600 clamp(11px, 2.9vw, 13px)/1.2 system-ui, sans-serif;
    text-shadow: none;
    transition: background .15s ease, border-color .15s ease;
}
#game-log-shell .game-log-channel-btn.active {
    border-color: rgba(151, 225, 255, .83);
    color: #ffffff;
    background: linear-gradient(165deg, #3689ad, #245f96 55%, #234270);
    box-shadow: inset 0 1px 0 rgba(222, 247, 255, .22),
        0 0 0 1px rgba(59, 172, 234, .1);
}
#game-log-shell .game-log-channel-btn:focus-visible,
#game-log-shell button:focus-visible,
#game-log-shell input:focus-visible {
    outline: 2px solid var(--orbis-chat-sky);
    outline-offset: 2px;
}

/* No parchment behind light text: dense, legible chat on a deep-blue pane. */
#game-log-shell #game-log {
    background:
        radial-gradient(ellipse at 88% 4%, rgba(83, 182, 226, .17), transparent 47%),
        radial-gradient(ellipse at 4% 96%, rgba(65, 80, 153, .17), transparent 55%),
        linear-gradient(170deg, #13395d 0%, #122c50 46%, #101b3e 100%);
    background-image:
        radial-gradient(ellipse at 88% 4%, rgba(83, 182, 226, .17), transparent 47%),
        radial-gradient(ellipse at 4% 96%, rgba(65, 80, 153, .17), transparent 55%),
        linear-gradient(170deg, #13395d 0%, #122c50 46%, #101b3e 100%);
    color: var(--orbis-chat-ivory);
    border: 0;
    padding: 9px 10px 12px;
    font: 13px/1.48 system-ui, -apple-system, sans-serif;
    scrollbar-color: rgba(116, 184, 224, .6) transparent;
}
#game-log-shell #game-log .social-msg,
#game-log-shell #game-log .log-msg {
    padding: 6px 7px;
    margin: 0;
    color: var(--orbis-chat-ivory);
    background: transparent;
    border-bottom: 1px solid rgba(179, 210, 234, .13);
    border-left: 2px solid transparent;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
#game-log-shell #game-log .social-msg b {
    color: var(--orbis-chat-white-gold);
    font-weight: 700;
}
#game-log-shell #game-log .social-msg time {
    color: var(--orbis-chat-muted);
    font-size: 11px;
    margin-right: 5px;
    font-variant-numeric: tabular-nums;
}
#game-log-shell #game-log .social-status {
    color: #bde5fa;
    padding: 8px 7px;
    font-size: 12px;
    line-height: 1.4;
}

/* Composer and friend management share the same visual language. */
#game-log-shell #social-composer {
    gap: 6px;
    padding: 7px;
    background:
        linear-gradient(90deg, rgba(65, 160, 186, .09), transparent 58%),
        linear-gradient(110deg, #102947, #151f42);
    border-top: 1px solid var(--orbis-chat-edge);
}
#game-log-shell #social-composer input,
#game-log-shell #social-panel-body input {
    min-width: 0;
    color: var(--orbis-chat-ivory);
    background: linear-gradient(180deg, #123655, #101f43);
    border: 1px solid rgba(153, 198, 227, .43);
    border-radius: 8px;
    font: 14px/1.3 system-ui, sans-serif;
    box-shadow: inset 0 1px 3px rgba(0, 8, 24, .22);
}
#game-log-shell #social-composer input::placeholder,
#game-log-shell #social-panel-body input::placeholder {
    color: #adc3d6;
    opacity: 1;
}
#game-log-shell #social-composer button,
#game-log-shell #social-friends-panel button {
    color: var(--orbis-chat-ivory);
    background: linear-gradient(150deg, #2b5f80, #233b6a);
    border: 1px solid rgba(161, 208, 240, .48);
    border-radius: 8px;
    font: 600 13px/1.2 system-ui, sans-serif;
    min-height: 37px;
    padding: 7px 11px;
    text-shadow: none;
}
#game-log-shell #social-send {
    color: #081d38;
    background: linear-gradient(145deg, #def5fa, #83d9e8 52%, #5cafe8);
    border-color: #c6eeff;
    font-size: 19px;
    padding-inline: 12px;
}
#game-log-shell #social-composer button:disabled,
#game-log-shell #social-friends-panel button:disabled {
    opacity: .45;
}
#game-log-shell #social-friends-panel {
    inset: 36px 0 0;
    color: var(--orbis-chat-ivory);
    background:
        radial-gradient(ellipse at 100% 0, rgba(86, 183, 225, .17), transparent 55%),
        linear-gradient(155deg, #1c4268, #14284b 50%, #101a3b);
    border: 0;
    padding: 12px;
}
#game-log-shell .social-panel-head {
    color: var(--orbis-chat-white-gold);
    border-bottom: 1px solid var(--orbis-chat-edge);
    padding-bottom: 10px;
}
#game-log-shell .social-friend-row {
    border-bottom-color: rgba(177, 216, 245, .19);
}
#game-log-shell .social-panel-note {
    color: #c4ddf0;
}


/* Slightly different materials and accents give the chat depth without
   competing with readable message text or changing any other game screen. */
#game-log-shell .game-log-channel-btn:nth-child(2) {
    background: linear-gradient(165deg, #1c4364, #153451);
}
#game-log-shell .game-log-channel-btn:nth-child(3) {
    background: linear-gradient(165deg, #26375f, #192849);
}
#game-log-shell .game-log-channel-btn:nth-child(4) {
    background: linear-gradient(165deg, #293858, #152946);
}
#game-log-shell .game-log-channel-btn.active {
    color: #ffffff;
    background: linear-gradient(155deg, #398cb1, #286795 57%, #254e85);
    border-color: #a7dcf3;
    box-shadow: inset 0 1px 0 rgba(255, 244, 209, .3),
        inset 0 -2px 0 rgba(247, 215, 156, .58),
        0 0 11px rgba(69, 176, 222, .14);
}
#game-log-shell #game-log .social-msg:nth-child(even) {
    background: linear-gradient(90deg, rgba(88, 150, 200, .12), rgba(65, 82, 150, .06));
    border-left-color: rgba(123, 211, 243, .53);
}
#game-log-shell #game-log .social-msg:nth-child(odd) {
    background: linear-gradient(90deg, rgba(45, 83, 143, .13), transparent 88%);
    border-left-color: rgba(231, 199, 135, .41);
}
#game-log-shell #game-log .social-msg b {
    color: var(--orbis-chat-champagne);
}
#game-log-shell #game-log .social-msg time {
    color: #b3d5e9;
}
#game-log-shell #social-friends-panel .social-friend-row:nth-child(even) {
    background: rgba(91, 148, 202, .09);
    border-radius: 5px;
}
#game-log-shell #social-friends-panel .social-panel-head strong {
    color: var(--orbis-chat-champagne);
}

/* Short narrow phones: keep four channels readable without horizontal scroll. */
@media (max-width: 380px) {
    #game-log-shell #game-log-menu { gap: 3px; padding-inline: 4px; }
    #game-log-shell .game-log-channel-btn {
        min-height: 36px;
        padding-inline: 1px;
        font-size: 10px;
    }
    #game-log-shell #social-composer { gap: 4px; padding-inline: 5px; }
    #game-log-shell #social-composer button { padding-inline: 8px; }
}

/* Orbis release badge and prompt — only the startup menu. */
.startup-release-footer {
    margin:14px 0 0;padding:9px 4px 0;text-align:center;
    color:#bcd9eb;border-top:1px solid rgba(177,215,237,.28);
    font:500 11px/1.5 system-ui,sans-serif;letter-spacing:.035em;
}
.orbis-release-overlay {
    position:fixed;inset:0;z-index:2147483000;padding:16px;
    display:flex;justify-content:center;align-items:center;
    background:rgba(2,11,28,.84);
}
.orbis-release-dialog {
    width:min(100%,370px);max-height:85vh;overflow:auto;
    padding:22px 17px;text-align:center;color:#f4fbff;
    background:linear-gradient(160deg,#1c4e7b,#122b52 61%,#0b1b37);
    border:1px solid #dbc591;border-radius:12px;
    box-shadow:0 14px 48px rgba(0,3,18,.65);
}
.orbis-release-dialog h2 {
    margin:0 0 10px;color:#f4dfae;font:700 23px/1.3 Georgia,serif;
}
.orbis-release-dialog p {
    margin:0 0 15px;color:#d4e9f5;font:14px/1.5 system-ui,sans-serif;
}
.orbis-release-dialog-actions {
    display:flex;justify-content:center;flex-wrap:wrap;gap:9px;
}
.orbis-release-dialog-actions button {
    min-width:112px;min-height:42px;padding:9px 12px;
    color:#eaf7ff;background:linear-gradient(165deg,#285d86,#20375c);
    border:1px solid #8ac8eb;border-radius:8px;font:600 14px system-ui;
    cursor:pointer;
}
.orbis-release-dialog-actions button:first-child {
    color:#0c2847;background:linear-gradient(150deg,#fff1d0,#b8e8ff);
    border-color:#f5d49a;
}
.orbis-release-dialog button:focus-visible {
    outline:2px solid #a5e3ff;outline-offset:3px;
}

/* Character & Journal reuse the inventory's parchment, ornate SVG frame,
   tab button surface and gold title ornament; only their geometry is new. */
.main-bottom-nav-btn:disabled,
.main-bottom-nav-btn-inactive {
    opacity:.32;
    filter:grayscale(1);
    cursor:not-allowed;
    pointer-events:none;
}
.main-bottom-nav-btn:disabled .main-bottom-nav-icon {filter:grayscale(1)}
.orbis-nav-panel {
    width:calc(100% - 20px);
    max-width:none;
    min-height:190px;
    margin:0 10px 15px;
    padding:15px;
    overflow:visible;
    font-family:Georgia,"Times New Roman",serif;
}
.orbis-nav-panel .inv-main-title {
    margin:0 0 18px;
    font-size:21px;
    text-align:center;
}
.orbis-nav-actions {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}
.orbis-nav-actions .inventory-tab-btn {
    width:100%;
    min-height:52px;
    padding:12px 15px;
    text-align:center;
    font:700 16px/1.3 Georgia,"Times New Roman",serif;
    touch-action:manipulation;
    cursor:pointer;
}
.orbis-nav-back.inventory-tab-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    max-width:100%;
    margin:0 0 12px;
    padding:8px 14px;
    font:700 14px/1.25 Georgia,"Times New Roman",serif;
    touch-action:manipulation;
    cursor:pointer;
}
.orbis-nav-actions .inventory-tab-btn:active,
.orbis-nav-back.inventory-tab-btn:active {filter:brightness(1.14)}
.orbis-nav-actions .inventory-tab-btn:focus-visible,
.orbis-nav-back.inventory-tab-btn:focus-visible {
    outline:2px solid var(--fantasy-gold);
    outline-offset:3px;
}
.orbis-nav-note {color:var(--fantasy-text-dark);font-size:14px;line-height:1.55}
@media (max-width:360px) {
    .orbis-nav-panel {padding:12px}
    .orbis-nav-panel .inv-main-title {font-size:19px}
    .orbis-nav-actions .inventory-tab-btn {font-size:15px;min-height:48px}
}



/* Social v2: channel-count badge, compact recipient picker and nickname menu.
   Scoped to the existing chat shell; the four-tab Journal screen is unchanged. */
#game-log-shell .social-unread-badge{
    display:inline-flex;justify-content:center;align-items:center;
    min-width:23px;height:21px;margin-left:4px;padding:0 5px;
    border-radius:12px;background:#cb2535;color:#fff;border:1px solid #ff6a72;
    font:700 12px/1 system-ui,sans-serif;text-shadow:none;
    box-shadow:0 1px 3px #360c17;
}
#game-log-shell .social-unread-badge[hidden],
#game-log-shell #social-recipient-label[hidden]{display:none!important}
#game-log-shell #social-recipient-label{
    display:flex;align-items:center;gap:3px;min-width:0;
    color:var(--orbis-chat-white-gold);font:600 12px/1.2 system-ui,sans-serif
}
#game-log-shell #social-peer-select{
    min-width:75px;max-width:105px;width:24vw;padding:6px 3px;
    border:1px solid rgba(153,198,227,.43);border-radius:7px;
    color:#f0f8ff;background:#123655;font:12px system-ui,sans-serif
}
#game-log-shell .social-nick-link{
    display:inline;border:0;padding:0;background:transparent;cursor:pointer;
    color:var(--orbis-chat-champagne);font:700 13px/1.2 system-ui,sans-serif;
    text-align:left;overflow-wrap:anywhere
}
#game-log-shell .social-nick-menu{
    display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 3px;padding:7px;
    border:1px solid rgba(153,198,227,.55);border-radius:8px;
    background:#142d51
}
#game-log-shell .social-nick-menu button{
    min-height:34px;padding:6px;border:1px solid #6f9abc;border-radius:6px;
    background:#225078;color:#f3dda7;font:600 12px system-ui,sans-serif
}
#game-log-shell .social-nick-menu p{width:100%;margin:0;color:#d4eafa;font-size:12px}
#game-log-shell #social-composer select:focus-visible,
#game-log-shell .social-nick-link:focus-visible{outline:2px solid #66c7fa;outline-offset:2px}
@media(max-width:380px){
    #game-log-shell #social-recipient-label{font-size:11px}
    #game-log-shell #social-peer-select{max-width:84px;min-width:66px}
}

/* Public encyclopedia links: existing golden frames, accessible on mobile. */
.startup-wiki-link {
    display:flex;align-items:center;justify-content:center;
    box-sizing:border-box;text-decoration:none;
}
.top-menu .top-menu-wiki-link {
    display:block;box-sizing:border-box;text-decoration:none;
}


/* The existing forge palette, with one short progress indicator. */
.forge-enhancement-progress { margin: 14px 0; padding: 12px; color: #e9cf8f; background: #132b45; border: 1px solid #b99855; border-radius: 7px; text-align: center; }
.forge-enhancement-progress[hidden] { display: none; }
.forge-progress-track { height: 9px; margin-top: 9px; background: #071727; border: 1px solid #b99855; border-radius: 5px; overflow: hidden; }
.forge-progress-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#467db1,#e5c77c); }
.forge-is-busy .forge-menu-panel, .forge-is-busy #forge-upgrade-panel, .forge-is-busy #forge-reset-panel { pointer-events: none; opacity: .65; }
@keyframes forge-enhancement-fill { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .forge-progress-track i { animation-duration: .001s !important; } }

/* Shops retain the character inventory's three containers and stable slots. */
#shop-player-tabs {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-width:0}
#shop-player-tabs .inventory-tab-btn {box-sizing:border-box;min-width:0;height:36px;min-height:36px;padding:4px;font-size:13px;line-height:1.15;overflow-wrap:anywhere}
#shop-player-grid .shop-slot.empty:disabled {cursor:default}
#shop-sale-quantity-modal {z-index:10100;box-sizing:border-box;padding:16px;background:rgba(8,5,3,.88)}
/* Reuse the Guild card's parchment and original bronze frame with blue gems. */
#shop-sale-quantity-modal .shop-sale-quantity-card {
 box-sizing:border-box;width:min(100%,360px);max-height:calc(100dvh - 32px);
 min-height:0;overflow-y:auto;padding:17px 18px 20px;
 color:var(--fantasy-text-dark,#3b2918);
 font-family:Georgia,"Times New Roman",serif;
 background-color:var(--fantasy-paper,#d8bc82);
 background-image:url("assets/ui/paper-texture.svg"),
   linear-gradient(145deg,var(--fantasy-paper-light,#f0d9a5),var(--fantasy-paper,#d8bc82));
 background-repeat:repeat,no-repeat;
 background-clip:padding-box;
 border:12px solid transparent;
 border-image:url("assets/ui/frame-bronze.svg") 24 / 12px / 0 stretch;
 border-radius:0;
 box-shadow:inset 0 0 0 1px rgba(88,54,24,.2),
   inset 0 0 14px rgba(95,59,25,.12),0 12px 35px #0009;
}
#shop-sale-quantity-modal .shop-sale-quantity-card h3 {
 margin:0 0 12px;text-align:center;font-size:21px;line-height:1.15;
 color:#4b2e13;text-shadow:0 1px 0 rgba(255,245,210,.75);
}
#shop-sale-quantity-modal .shop-sale-quantity-card h3::after {
 content:"";display:block;width:min(75%,220px);height:10px;margin:8px auto 0;
 background:url("assets/ui/ornaments/ornament-divider.png") center / contain no-repeat;
}
#shop-sale-quantity-modal #shop-sale-item-name {
 display:block;text-align:center;overflow-wrap:anywhere;color:#53351d;
}
.shop-sale-quantity-card label {display:block;margin:12px 0 7px}
#shop-sale-quantity-input {box-sizing:border-box;display:block;width:100%;min-width:0;min-height:44px;padding:0;border:0;background:transparent;accent-color:#946c2f;cursor:pointer}
#shop-sale-total {font-weight:700}
#shop-sale-error {color:#8c2118;font-size:14px;line-height:1.4}
#shop-sale-error:empty {display:none}
.shop-sale-quantity-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}
.shop-sale-quantity-actions button {min-height:44px;padding:9px 7px;border:1px solid #a17b3f;border-radius:6px;background:linear-gradient(#65451f,#392711);color:#fff0bd;font:700 15px/1.3 Georgia,"Times New Roman",serif}
/* Subtle matching blue-gem bronze corners on sale confirmation buttons. */
#shop-sale-quantity-modal .shop-sale-quantity-actions button {
 position:relative;isolation:isolate;border-radius:0;overflow:hidden;
}
#shop-sale-quantity-modal .shop-sale-quantity-actions button::after {
 content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
 border:7px solid transparent;
 border-image:url("assets/ui/frame-bronze.svg") 24 / 7px / 0 stretch;
}
#shop-sale-submit:disabled {opacity:.5;cursor:default}
#shop-sale-quantity-input:focus-visible,.shop-sale-quantity-actions button:focus-visible {outline:2px solid #286c94;outline-offset:2px}

/* OFFLINE 2026-10-31: compact orders, recipes and horizontal swipe tabs. */
.orbis-order-card{padding:9px 10px;margin:8px 0}
.orbis-order-heading{display:grid;grid-template-columns:minmax(0,1fr) 24px clamp(100px,32vw,140px) 32px;align-items:center;gap:6px}
.orbis-order-heading h3{font-size:clamp(13px,3.3vw,17px);margin:0;overflow-wrap:anywhere}
.orbis-order-stars{font:700 17px/1 Georgia,serif;color:#9b651a;white-space:nowrap;justify-self:center;text-align:center}
.orbis-order-card .orbis-order-action{box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;min-width:0;width:100%;min-height:44px;font-size:12px;line-height:1.15;white-space:normal;overflow-wrap:anywhere;padding:5px 6px;margin:0}
.orbis-order-expand{box-sizing:border-box;width:32px;min-width:0;min-height:44px;border:1px solid #b18b48;background:rgba(150,106,45,.16);color:#4d3011;border-radius:6px;font:700 20px Georgia,serif}
.orbis-order-details[hidden]{display:none!important}
.orbis-order-details{padding:9px 2px 1px;border-top:1px solid #b99458;margin-top:8px}
.orbis-order-details p{margin:0 0 5px;line-height:1.3}
.orbis-order-rewards{margin:7px 0 1px}
.orbis-journal-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scroll-snap-type:x proximity;padding-bottom:6px}
.orbis-journal-tabs .inventory-tab-btn{flex:0 0 auto;width:auto;min-width:max-content;min-height:42px;padding:5px 11px;white-space:nowrap;font-size:clamp(11px,2.9vw,14px);scroll-snap-align:start}
@media(max-width:360px){.orbis-order-heading{grid-template-columns:minmax(0,1fr) 18px clamp(96px,31vw,112px) 30px;gap:4px}.orbis-order-card .orbis-order-action{font-size:11px;padding:4px}.orbis-order-stars{font-size:14px}.orbis-order-expand{width:30px}}
#workshop-recipe-list{gap:6px}
.workshop-recipe-card{padding:8px 10px;border-radius:7px}
.workshop-recipe-title{font-size:14px;line-height:1.25}
.workshop-recipe-desc{margin:2px 0 5px;line-height:1.25}
.workshop-ingredients{gap:0}
.workshop-ingredient{padding:1px 0;line-height:1.2;gap:6px;align-items:baseline}
.workshop-ingredient b{white-space:nowrap}
.workshop-craft-btn{margin-top:5px;padding:5px 8px;min-height:36px}
.journal-recipe-section{margin-bottom:14px}
.journal-recipe-section h3{margin:12px 0 7px;font-size:16px;color:#4b3218}
.journal-recipe-row{margin:5px 0;padding:7px 10px;border:1px solid #b9904e;border-radius:6px;background:rgba(148,108,57,.09)}
.journal-recipe-row summary{font-weight:700;cursor:pointer}
.journal-recipe-row p{margin:7px 0 4px;color:#59442c;font-size:13px}
.journal-recipe-row ul{margin:5px 0 2px;padding-left:20px;font-size:13px}

.workshop-recipe-disclosure{margin:4px 0 5px;color:#624a30;font-size:12px}
.workshop-recipe-disclosure summary{cursor:pointer;font-weight:700;line-height:1.2}
.workshop-recipe-disclosure .workshop-recipe-desc{margin:4px 0 2px;font-size:12px}


/* Five player-configured combat consumable quick slots (inventory pane). */
#inventory-quickbar {
  margin: 7px 5px 12px;
  padding: 8px;
  border: 1px solid #bd955b;
  border-radius: 8px;
  background: linear-gradient(160deg,#dfc89c,#f1ddb2 48%,#ccae79);
}
#inventory-quickbar[hidden] {display:none !important;}
.inventory-quickbar-heading {
  color:#63431f;
  font: bold clamp(10px,2.6vw,13px)/1.4 Georgia,serif;
  margin:0 0 7px;
}
#inventory-quickbar-slots {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px;
  width:100%;
}
#inventory-quickbar .orbis-quick-slot,
#battle-quickbar-slots .orbis-quick-slot {
  box-sizing:border-box;
  display:block;
  position:relative;
  min-width:0;
  width:100%;
  aspect-ratio:1;
  border:1px solid #946634;
  border-radius:6px;
  background:linear-gradient(150deg,#573b26,#21150f);
  box-shadow:inset 0 0 4px #000a,0 1px 3px #0006;
  padding:3px;
  overflow:visible;
  cursor:pointer;
  touch-action:none;
}
#inventory-quickbar .orbis-quick-slot {
  background:linear-gradient(145deg,#e9d9b9,#b38a53);
  border:2px solid #8e6436;
}
#inventory-quickbar .orbis-quick-slot.is-filled {
  background:linear-gradient(140deg,#7b5128,#302013);
}
#inventory-quickbar .orbis-quick-slot.is-selected {
  border-color:#276f31;
  outline:3px solid #4cae5c;
  outline-offset:-2px;
  box-shadow:0 0 0 2px #e7f5a3,0 0 8px #326e42;
}
.orbis-quick-slot-art {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 1px 2px #0009);
}
.orbis-quick-slot-placeholder {
  display:grid;
  place-items:center;
  height:100%;
  width:100%;
  color:#b4a079;
  font:700 12px Georgia,serif;
  opacity:.75;
}
.orbis-quick-slot-count {
  position:absolute;
  right:2px;
  bottom:1px;
  z-index:2;
  color:#fff;
  font:bold clamp(10px,2.5vw,12px)/1 Georgia,serif;
  text-shadow:0 1px #000,1px 1px #000,-1px -1px #000,0 0 3px #000;
  pointer-events:none;
}
.orbis-quick-slot-remove {
  position:absolute;
  top:-4px;
  right:-3px;
  z-index:3;
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border:1px solid #b88545;
  border-radius:50%;
  background:#402317;
  color:#ffe0ae;
  font:bold 13px/1 Georgia,serif;
}
#inventory-quickbar .orbis-quick-slot.inventory-drag-target {
  outline:2px solid #69b95c;
  outline-offset:-3px;
}
#inventory-quickbar .orbis-quick-slot.inventory-drag-invalid {
  outline:2px solid #c03b36;
  outline-offset:-3px;
}




/* Approved Steppe bestiary card: region scenery behind the transparent
   512px monster sprite. Reuse the battle backgrounds; frame and text of the
   existing normal/elite/miniboss cards stay untouched. */
.mob-info-modal-content[data-mob-tier] .mob-modal-art-slot.orbis-mob-region-scene {
  position: relative;
  background-color: #34261b;
  background-image:
    linear-gradient(180deg,rgba(22,14,8,.03) 0%,rgba(22,14,8,.07) 70%,rgba(22,14,8,.23) 100%),
    var(--orbis-mob-region-url);
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: 100% 100%, cover;
}
.mob-modal-art-slot.orbis-mob-region-scene .mob-modal-art-image {
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: center center;
  background: transparent;
  filter: drop-shadow(0 3px 5px rgba(11,8,5,.57));
}

/* Mobile quantity selection: native sliders, no keyboard. */
.orbis-quantity-header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 0 4px;color:#422e19}
.orbis-quantity-header strong{font:700 16px Georgia,serif;white-space:nowrap;font-variant-numeric:tabular-nums}
.orbis-quantity-controls{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:8px;width:100%;min-width:0}
.orbis-quantity-controls input[type="range"]{width:100%;min-width:0;min-height:44px;accent-color:#80602b;cursor:pointer}
.orbis-quantity-controls button,.orbis-quantity-max{box-sizing:border-box;display:grid;place-items:center;min-height:42px;padding:4px 9px;border:1px solid #93683a;border-radius:7px;background:linear-gradient(#f7eccb,#cdae77);color:#48311d;font:700 18px Georgia,serif;touch-action:manipulation;cursor:pointer}
.orbis-quantity-max{margin:6px 0 0 auto;font-size:12px;min-height:34px}
.orbis-quantity-controls button:disabled,.orbis-quantity-max:disabled{opacity:.45;cursor:default}
.orbis-quantity-controls button:focus-visible,.orbis-quantity-max:focus-visible,.orbis-quantity-controls input:focus-visible{outline:2px solid #357b58;outline-offset:2px}
.workshop-batch-picker{margin:8px 0 5px;padding:7px 8px 4px;border:1px solid #cdb88a;border-radius:8px;background:rgba(194,166,109,.13)}
.workshop-batch-picker .orbis-quantity-controls{grid-template-columns:40px minmax(0,1fr) 40px;gap:6px}
.workshop-batch-picker .orbis-quantity-header{margin:0 0 2px;font-size:12px}
.workshop-batch-picker .orbis-quantity-header strong{font-size:14px}
.workshop-batch-result{margin:4px 0 2px;color:#3e672d;font:bold 12px/1.3 Georgia,serif}
.workshop-progress{position:sticky;top:0;z-index:4;margin:7px 0 10px;padding:10px;background:#19314a;color:#f5e3b2;border:1px solid #b99458;border-radius:8px}
.workshop-progress[hidden]{display:none!important}
.workshop-progress-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:700}
.workshop-progress-heading button{min-height:36px;flex-shrink:0;padding:5px 9px;border:1px solid #d9b56d;border-radius:6px;background:#65421d;color:#fff3c7}
.workshop-progress-track{height:11px;margin-top:8px;background:#081522;border:1px solid #ae9257;border-radius:6px;overflow:hidden}
.workshop-progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#4f9b78,#c4e796)}
.workshop-is-busy #workshop-recipe-list{opacity:.65;pointer-events:none}
.workshop-is-busy .workshop-tab-btn{opacity:.65;pointer-events:none}
@keyframes workshop-progress-fill{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){.workshop-progress-track i{animation-duration:.001s!important}}


/* OFFLINE stage 2: compact recipe catalog and two-step crafting dialog. */
#workshop-tier-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:4px 0 8px}
#workshop-tier-tabs .workshop-tier-btn{min-width:0;min-height:36px;padding:5px 0;border:1px solid #88643a;border-radius:5px;background:#4a3021;color:#e8d6b0;font:700 12px Georgia,serif;cursor:pointer}
#workshop-tier-tabs .workshop-tier-btn.active{background:#946d37;color:#fff5d5;box-shadow:inset 0 0 0 1px #d2ad6c}
#workshop-tier-tabs .workshop-tier-btn:disabled{opacity:.55}
.workshop-available-filter{display:flex;align-items:center;gap:8px;margin:4px 2px;padding:5px 3px;color:#4d3a22;font:700 12px Georgia,serif;cursor:pointer}
.workshop-available-filter input{width:20px;height:20px;margin:0;accent-color:#80602b}
#workshop-summary{padding:4px 3px;margin-bottom:6px}
#workshop-recipe-list{gap:5px}
#workshop-recipe-list .workshop-compact-row{padding:5px 6px;border:1px solid #b89965;border-radius:8px;background:linear-gradient(120deg,rgba(232,206,157,.42),rgba(160,122,74,.12))}
#workshop-recipe-list .workshop-compact-row.locked{opacity:.7}
.workshop-recipe-main{display:flex;align-items:center;gap:6px;min-width:0}
.workshop-recipe-summary{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;min-height:57px;border:0;background:transparent;text-align:left;padding:1px;cursor:pointer;color:#42301c}
.workshop-recipe-summary:focus-visible,#workshop-recipe-list .workshop-craft-btn:focus-visible,#workshop-tier-tabs button:focus-visible{outline:2px solid #337859;outline-offset:2px}
.workshop-result-art{display:grid;place-items:center;flex:0 0 49px;width:49px;height:49px;overflow:hidden;border:1px solid #a57c49;border-radius:6px;background:radial-gradient(circle,#e8d3ab,#ae8a57);color:#76532e;font-size:28px}
.workshop-result-art img{display:block;width:100%;height:100%;object-fit:contain}
.workshop-recipe-copy{display:flex;flex:1 1 auto;flex-direction:column;gap:3px;min-width:0;line-height:1.16}
.workshop-recipe-copy .workshop-recipe-title{font-size:13px;line-height:1.2;overflow-wrap:anywhere}
.workshop-recipe-copy small{font-size:11px;color:#6a5333}
.workshop-details-chevron{flex:0 0 auto;font-size:16px;color:#745530}
#workshop-recipe-list .workshop-craft-btn{flex:0 0 72px;width:72px;margin:0;padding:7px 3px;min-height:42px;font-size:12px;line-height:1.1}
.workshop-inline-details{padding:5px 4px 3px 58px;border-top:1px solid rgba(124,86,45,.3)}
.workshop-inline-details .workshop-recipe-desc{margin:2px 0 6px;font-size:12px;line-height:1.35}
.workshop-inline-details .workshop-ingredient{gap:6px;align-items:center}
.workshop-inline-details .workshop-ingredient b{white-space:nowrap}
#workshop-quantity-overlay{position:fixed;inset:0;z-index:30;background:rgba(7,9,12,.75);display:grid;place-items:center;padding:14px;box-sizing:border-box}
#workshop-quantity-overlay[hidden]{display:none!important}
#workshop-quantity-dialog{position:relative;box-sizing:border-box;width:min(100%,420px);max-height:88vh;max-height:88dvh;overflow-y:auto;padding:14px 13px 16px;border:2px solid #b58a4d;border-radius:12px;background:#ead6ae url("assets/ui/paper-texture.svg");color:#37281a;box-shadow:0 10px 35px rgba(0,0,0,.5)}
#workshop-quantity-dialog>.inv-main-title{margin:2px 28px 14px;text-align:center;font-size:17px}
#workshop-quantity-dialog .workshop-quantity-item{display:flex;align-items:center;gap:10px;margin:0 0 12px}
#workshop-quantity-dialog .workshop-quantity-item .workshop-result-art{flex-basis:58px;width:58px;height:58px}
#workshop-quantity-dialog .workshop-quantity-item strong{display:block;font-size:15px}
#workshop-quantity-dialog .workshop-quantity-item small{display:block;margin-top:3px;color:#765433}
#workshop-quantity-dialog .workshop-quantity-ingredients{padding:7px 8px;border-radius:7px;border:1px solid #c3a478;background:rgba(245,223,175,.56)}
#workshop-quantity-dialog .workshop-quantity-ingredient{gap:8px;align-items:center;padding:4px 0}
#workshop-quantity-dialog .workshop-quantity-ingredient b{white-space:nowrap}
#workshop-quantity-dialog .workshop-batch-picker{margin:12px 0;padding:8px}
#workshop-quantity-dialog .workshop-quantity-confirm{margin:10px 0 0;width:100%;min-height:44px}
#workshop-quantity-dialog .workshop-quantity-confirm:disabled{opacity:.55}
.workshop-is-busy #workshop-tier-tabs,.workshop-is-busy .workshop-available-filter{opacity:.55;pointer-events:none}
@media(max-width:360px){.workshop-result-art{flex-basis:44px;width:44px;height:44px}.workshop-recipe-summary{gap:5px}.workshop-recipe-main{gap:4px}#workshop-recipe-list .workshop-craft-btn{flex-basis:64px;width:64px;font-size:11px}.workshop-inline-details{padding-left:48px}}

/* Stage2 mobile containment and shared Orbis bronze tab frames. */
#workshop-content{box-sizing:border-box;width:96%;max-width:450px;max-height:90vh;max-height:90dvh}

/* Expanded workshop recipes reuse the exact consumable stat rows from item info. */
.workshop-inline-details .item-context-box{margin:7px 0;padding:7px 8px;background:rgba(240,211,159,.33)}
.workshop-inline-details .item-context-row{gap:5px;font-size:12px;flex-wrap:wrap}
.workshop-inline-details .item-context-row b{overflow-wrap:anywhere;text-align:right;margin-left:auto}

/* OFFLINE Skills V2: art-only class tabs reuse the inventory's fantasy buttons. */
#skills-list-container .skills-specialization-tabs {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    min-width:0;
    margin:8px 0 12px;
}
#skills-list-container .skills-specialization-tab {
    box-sizing:border-box;
    display:flex;
    justify-content:center;
    align-items:center;
    min-width:0;
    width:100%;
    height:78px;
    padding:5px;
    overflow:hidden;
    cursor:pointer;
    touch-action:manipulation;
}
#skills-list-container .skills-specialization-tab img {
    display:block;
    width:100%;
    height:100%;
    max-width:74px;
    object-fit:contain;
    pointer-events:none;
}
#skills-list-container .skills-specialization-tab.active {
    filter:brightness(1.16);
    box-shadow:inset 0 -3px 0 #c99536,0 0 0 1px rgba(60,132,200,.55);
}
#skills-list-container .skills-specialization-tab:focus-visible {
    outline:2px solid #55a8e4;
    outline-offset:2px;
}
@media (max-width:360px) {
    #skills-list-container .skills-specialization-tabs { gap:5px; }
    #skills-list-container .skills-specialization-tab { height:68px; }
}


/* OFFLINE TEST — gear UI: Anima-style metadata, without hiding the item art. */
.item-slot-meta.equipment-meta-corners {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
    font-size: clamp(8px, 2vw, 11px);
    line-height: 1;
    --item-corner-space: 11%;
}
.personal-storage-slot .equipment-meta-corners,
#forge-modal .forge-item-slot .equipment-meta-corners {
    --item-corner-space: 3px;
}
.item-slot-meta.equipment-meta-corners > span {
    position: absolute;
    display: inline-block;
    width: max-content;
    max-width: 65%;
    padding: 2px 3px;
    border-radius: 3px;
    background: rgba(16, 12, 10, .86);
    color: #f9ebc4;
    font-family: Georgia, "Times New Roman", serif;
    font-size: inherit;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: -.2px;
    text-shadow: 0 1px 2px #000;
    box-shadow: 0 0 2px rgba(0,0,0,.4);
}
.item-slot-meta.equipment-meta-corners .equipment-meta-rank {
    left: var(--item-corner-space);
    bottom: var(--item-corner-space);
    color: #f2d88d;
}
.item-slot-meta.equipment-meta-corners .equipment-meta-level {
    right: var(--item-corner-space);
    bottom: var(--item-corner-space);
}
.item-slot-meta.equipment-meta-corners .equipment-meta-enhancement {
    right: var(--item-corner-space);
    top: var(--item-corner-space);
    color: #ffe3a1;
}
.bag-slot:has(.equipment-meta-corners) .item-slot-count,
.personal-storage-slot:has(.equipment-meta-corners) .personal-storage-count {
    bottom: auto;
    top: 4px;
    left: 4px;
    right: auto;
}

/* Gear detail: one compact metadata strip, readable content groups. */
.item-info-modal-content .item-info-compact-meta {
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
}
.item-info-modal-content .item-info-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    min-width: 45px;
    border: 1px solid rgba(102,67,35,.35);
    border-radius: 5px;
    background: rgba(75,47,23,.09);
    color: #49301b;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.item-info-modal-content .item-info-tag.is-rank {
    min-width: 32px;
    color: #442814;
    border-color: var(--item-info-rank-color, #97692f);
    box-shadow: inset 0 -2px 0 var(--item-info-rank-color, #97692f);
}
.item-info-modal-content .item-stats-block-title {
    margin-bottom: 5px;
    padding-bottom: 4px;
    font-weight: 800;
}
.item-info-modal-content .item-context-box {
    padding: 7px 8px;
    background: rgba(90,60,32,.055);
    border-color: rgba(105,73,37,.18);
}
.item-info-modal-content .item-description-box {
    margin-top: 10px;
    color: #654d33;
}
.item-info-modal-content .item-description-box b {
    display: block;
    margin-bottom: 2px;
    color: #503318;
}


/* OFFLINE TEST — quiet, grouped enchant information (no forge-menu redesign). */
#forge-modal #forge-info {
    padding: 10px 11px 12px;
    border-radius: 9px;
}
#forge-modal #forge-item-name {
    margin: 0 0 9px;
    font-size: clamp(15px, 3.8vw, 18px);
    line-height: 1.2;
    text-align: center;
}
#forge-modal .forge-level-preview {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    margin-bottom: 5px;
    padding: 0 0 7px;
    font-size: 13px;
}
#forge-modal .forge-level-preview b {
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}
#forge-modal .forge-section-subtitle {
    margin: 6px 0 3px;
    color: #654326;
    font-size: 12px;
    font-weight: 800;
}
#forge-modal .forge-stat-preview-row {
    gap: 6px;
    min-height: 24px;
}
#forge-modal .forge-stat-preview-name,
#forge-modal .forge-stat-preview-values {
    font-size: clamp(10px, 2.75vw, 12px);
}
#forge-modal .forge-stat-preview-values {
    gap: 3px;
}
#forge-modal #forge-cost,
#forge-modal #forge-chance {
    margin: 8px 0 0;
    padding: 8px 9px;
    border: 1px solid rgba(118,82,43,.22);
    border-radius: 6px;
    background: rgba(105,70,31,.055);
}
#forge-modal .forge-cost-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 7px;
}
#forge-modal .forge-cost-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    gap: 3px;
    text-align: center;
}
#forge-modal .forge-cost-item span {
    font-size: 11px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
#forge-modal .forge-cost-item b {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}
#forge-modal .forge-chance-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}
#forge-modal .forge-chance-item b {
    font-size: 19px;
    font-variant-numeric: tabular-nums;
}
#forge-modal .forge-enchantment-risk {
    margin: 8px 0 10px;
}
#forge-modal .forge-risk-stats {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
}
#forge-modal .forge-risk-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 5px;
    padding: 8px 4px;
    border: 1px solid rgba(118,82,43,.24);
    border-radius: 6px;
    background: rgba(100,66,32,.075);
    text-align: center;
}
#forge-modal .forge-risk-stat span {
    font-size: 10px;
    line-height: 1.2;
    color: #654326;
}
#forge-modal .forge-risk-stat strong {
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    color: #40301e;
}
#forge-modal .forge-risk-stat .is-danger {
    color: #b13021;
}
#forge-modal .forge-crystal-amount {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 7px 5px;
    border-top: 1px solid rgba(99,69,34,.2);
}
#forge-modal .forge-crystal-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 800;
}
#forge-modal .forge-crystal-step {
    flex: 0 0 40px;
    width: 40px;
    height: 38px;
    padding: 0;
    border: 1px solid #815b32;
    border-radius: 5px;
    background: linear-gradient(180deg,#584232,#291d18);
    color: #ffe8b2;
    font-family: inherit;
    font-size: 20px;
    font-weight: 800;
    touch-action: manipulation;
}
#forge-modal .forge-crystal-step:disabled {
    opacity: .38;
}
#forge-modal .forge-risk-help {
    margin: 3px 0 0;
    font-size: 11px;
    line-height: 1.35;
    color: #694b2d;
}
#forge-modal .forge-risk-help summary {
    display: inline-block;
    padding: 2px 0;
    cursor: pointer;
    font-weight: 700;
}
#forge-modal .forge-risk-help p {
    margin: 4px 0;
    padding: 5px 6px;
    background: rgba(116,78,44,.07);
    border-radius: 4px;
}


/* OFFLINE TEST — Vakula's forge: six approved emblems with understated frames.
   These apply ONLY to the main action menu, never to back/confirm controls. */
#forge-modal #forge-menu-panel.forge-menu-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 390px;
    margin: 8px auto 4px;
}
#forge-modal #forge-menu-panel .forge-menu-btn.forge-menu-tile {
    --orbis-frame-size: 0px;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 3px 2.2%;
    border: 0;
    border-radius: 0;
    color: #f5e3c1;
    background-color: #251a14;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(10px, 2.55vw, 12px);
    letter-spacing: 0;
    line-height: 1.04;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 3px #000, 0 0 3px #000;
    box-shadow: 0 2px 5px rgba(36, 20, 11, .28);
    cursor: pointer;
    touch-action: manipulation;
}
#forge-modal #forge-menu-panel .forge-menu-btn.forge-menu-tile::after {
    content: none !important;
    display: none !important;
}
#forge-modal #forge-menu-panel .forge-menu-btn.forge-menu-tile:focus-visible {
    outline: 2px solid #72c5f2;
    outline-offset: 2px;
}
#forge-modal #forge-menu-panel .forge-menu-btn.forge-menu-tile:active {
    filter: brightness(1.15);
}
#forge-modal #forge-menu-panel .forge-menu-tile[data-forge-tile="upgrade"] {
    background-image: url("assets/ui/forge/menu/forge_enhance.webp");
}
#forge-modal #forge-menu-panel .forge-menu-tile[data-forge-tile="rank"] {
    background-image: url("assets/ui/forge/menu/forge_rank.webp");
}
#forge-modal #forge-menu-panel .forge-menu-tile[data-forge-tile="dismantle"] {
    background-image: url("assets/ui/forge/menu/forge_dismantle.webp");
}
#forge-modal #forge-menu-panel .forge-menu-tile[data-forge-tile="enchant"] {
    background-image: url("assets/ui/forge/menu/forge_enchant.webp");
}
#forge-modal #forge-menu-panel .forge-menu-tile[data-forge-tile="gearLevel"] {
    background-image: url("assets/ui/forge/menu/forge_level.webp");
}
#forge-modal #forge-menu-panel .forge-menu-tile[data-forge-tile="reset"] {
    background-image: url("assets/ui/forge/menu/forge_reset.webp");
}
@media (max-width: 350px) {
    #forge-modal #forge-menu-panel.forge-menu-tile-grid {gap: 6px;}
    #forge-modal #forge-menu-panel .forge-menu-btn.forge-menu-tile {
        font-size: 10px;
        padding-bottom: 2.2%;
    }
}


/* A mode already has its own title; only show Vakula's title on the six-tile menu. */
#forge-modal:has(#forge-menu-panel[hidden]) .forge-modal-box > .shop-modal-title {
    display: none;
}
#forge-modal .forge-result-log:not([hidden]) {
    margin: 4px 0 3px;
    padding: 5px 7px;
    font-size: 11px;
    line-height: 1.2;
}

/* =========================================
   OFFLINE TEST — compact Vakula forge subpanels V2
   Six modes share dense, touch-safe mobile geometry.
   The main illustrated 2x3 menu stays unchanged.
   ========================================= */
#forge-modal .forge-modal-box {
    box-sizing: border-box;
    padding: 10px 11px 12px;
    max-height: 92dvh;
    scrollbar-width: thin;
}
#forge-modal .shop-modal-title {
    margin: 0 0 5px;
    font-size: clamp(17px, 4.3vw, 21px);
    line-height: 1.15;
}
#forge-modal .forge-coins-bar {
    margin: 5px 0 7px;
    padding: 5px 9px;
    font-size: 12px;
    line-height: 1.1;
}
#forge-modal .forge-section-header {
    gap: 5px;
    margin: 1px 0 5px;
}
#forge-modal .forge-section-title {
    font-size: clamp(12px, 3.4vw, 15px);
    line-height: 1.1;
}
#forge-modal .forge-section-spacer {width: 45px;}
#forge-modal .forge-back-btn {
    min-width: 45px;
    min-height: 32px;
    padding: 4px 5px;
}
#forge-modal .forge-help-text {
    margin: 0 0 5px;
    font-size: 10px;
    line-height: 1.2;
}

/* Two rows while browsing. After selecting an item, one swipeable row. */
#forge-modal :is(
    #forge-items-grid,
    #forge-rank-target-grid,
    #forge-enchant-items-grid,
    #forge-gear-items-grid,
    #forge-reset-items
) {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-content: start;
    gap: 4px;
    max-height: 143px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 2px;
    scrollbar-width: thin;
}
#forge-modal :is(
    #forge-upgrade-panel:has(#forge-items-grid .is-selected) #forge-items-grid,
    #forge-rank-panel:has(#forge-rank-target-grid .is-selected) #forge-rank-target-grid,
    #forge-enchant-panel:has(#forge-enchant-items-grid .is-selected) #forge-enchant-items-grid,
    #forge-gear-level-panel:has(#forge-gear-items-grid .is-selected) #forge-gear-items-grid
) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    max-height: 77px;
    min-height: 63px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
#forge-modal :is(
    #forge-upgrade-panel:has(#forge-items-grid .is-selected) #forge-items-grid,
    #forge-rank-panel:has(#forge-rank-target-grid .is-selected) #forge-rank-target-grid,
    #forge-enchant-panel:has(#forge-enchant-items-grid .is-selected) #forge-enchant-items-grid,
    #forge-gear-level-panel:has(#forge-gear-items-grid .is-selected) #forge-gear-items-grid
) > .shop-slot {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    scroll-snap-align: start;
}
#forge-modal :is(
    #forge-upgrade-panel:has(#forge-items-grid .is-selected),
    #forge-rank-panel:has(#forge-rank-target-grid .is-selected),
    #forge-enchant-panel:has(#forge-enchant-items-grid .is-selected),
    #forge-gear-level-panel:has(#forge-gear-items-grid .is-selected)
) > .forge-help-text {display: none;}
#forge-modal .forge-item-slot .forge-slot-art {width: 82%;height: 82%;}

/* Enhancement: name/stats full width, price LEFT and chance RIGHT. */
#forge-modal #forge-info[style*="display: block"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 5px 7px;
    margin-top: 6px;
    padding: 7px 8px 9px;
}
#forge-modal #forge-info > :is(
    #forge-item-name,#forge-item-stats,
    #forge-enhancement-risk-controls,#forge-upgrade-btn
) {grid-column: 1 / -1;min-width: 0;}
#forge-modal #forge-info #forge-item-name {
    margin: 0;
    font-size: clamp(13px, 3.5vw, 16px);
    line-height: 1.1;
}
#forge-modal #forge-info #forge-item-stats {font-size: 11px;min-width: 0;}
#forge-modal #forge-info .forge-level-preview {
    gap: 8px;
    padding: 2px 0 4px;
    margin-bottom: 2px;
    font-size: 11px;
}
#forge-modal #forge-info .forge-level-preview b {font-size: 14px;}
#forge-modal #forge-info .forge-section-subtitle {
    margin: 2px 0;
    font-size: 11px;
}
#forge-modal #forge-info .forge-stat-preview-list {gap: 0;}
#forge-modal #forge-info .forge-stat-preview-row {
    min-height: 21px;
    padding: 1px 0;
    gap: 3px;
}
#forge-modal #forge-info .forge-stat-preview-name,
#forge-modal #forge-info .forge-stat-preview-values {font-size: 10px;gap: 2px;}
#forge-modal #forge-info .stat-inline-icon {width: 14px;height: 14px;}
#forge-modal #forge-info #forge-cost,
#forge-modal #forge-info #forge-chance {
    grid-column: auto;
    min-width: 0;
    align-self: stretch;
    margin: 2px 0 0;
    padding: 5px 6px;
    border-radius: 5px;
}
#forge-modal #forge-info .forge-cost-items {
    grid-template-columns: minmax(0,1fr);
    gap: 3px;
}
#forge-modal #forge-info .forge-cost-item {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 3px;
    min-width: 0;
    text-align: left;
}
#forge-modal #forge-info .forge-cost-item span {
    font-size: 10px;
    line-height: 1.1;
}
#forge-modal #forge-info .forge-cost-item b {font-size: 12px;white-space: nowrap;}
#forge-modal #forge-info .forge-chance-item {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 11px;
}
#forge-modal #forge-info .forge-chance-item b {font-size: 17px;}
#forge-modal #forge-info .forge-enchantment-risk {margin: 2px 0 3px;}
#forge-modal #forge-info .forge-risk-stats {gap: 6px;}
#forge-modal #forge-info .forge-risk-stat {
    padding: 3px 5px;
    gap: 2px;
    border-color: rgba(118,82,43,.17);
}
#forge-modal #forge-info .forge-risk-stat span {font-size: 10px;}
#forge-modal #forge-info .forge-risk-stat strong {font-size: 14px;}
#forge-modal #forge-info .forge-crystal-amount {
    gap: 5px;
    margin-top: 3px;
    padding: 4px 2px 1px;
}
#forge-modal #forge-info .forge-crystal-label {font-size: 11px;}
#forge-modal #forge-info .forge-crystal-step {
    flex-basis: 36px;
    width: 36px;
    height: 34px;
}
#forge-modal #forge-info .forge-risk-help {margin: 0;font-size: 10px;}
#forge-modal #forge-info .forge-risk-help summary {padding: 1px 0;}
#forge-modal #forge-upgrade-btn {width: 100%;min-height: 38px;margin-top: 2px;}

/* Rank: compact dual-column progress & preview; donor list stays visible. */
#forge-modal #forge-rank-info:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 4px 7px;
    margin-top: 5px;
    padding: 7px 8px 8px;
}
#forge-modal #forge-rank-info > :is(
    #forge-rank-target-summary,#forge-rank-donor-grid,
    #forge-rank-warning,#forge-rank-absorb-btn
) {grid-column: 1 / -1;min-width: 0;}
#forge-modal .forge-rank-target-summary {
    margin: 0;
    padding-bottom: 3px;
}
#forge-modal .forge-rank-main-line {font-size: 12px;}
#forge-modal .forge-rank-main-meta {font-size: 10px;}
#forge-modal .forge-rank-progress {
    min-width: 0;
    margin: 1px 0;
    align-self: center;
}
#forge-modal .forge-rank-progress-line {font-size: 10px;}
#forge-modal .forge-rank-progress-track {height: 5px;margin-top: 4px;}
#forge-modal .forge-rank-preview {
    min-width: 0;
    margin: 0;
    padding: 3px 5px;
}
#forge-modal .forge-rank-preview-line {gap: 3px;padding: 1px 0;font-size: 10px;}
#forge-modal .forge-rank-donor-title {grid-column: 1 / -1;margin: 2px 0;font-size: 11px;}
#forge-modal .forge-rank-donor-grid {
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 4px;
    max-height: 85px;
    overflow-y: auto;
}
#forge-modal .forge-rank-warning {margin-top: 1px;padding: 3px 5px;}
#forge-modal #forge-rank-absorb-btn {margin-top: 2px;min-height: 38px;}

/* Dismantle: inventory and chosen items side-by-side even on mobile. */
#forge-modal .forge-dismantle-layout {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 6px;
}
#forge-modal .forge-dismantle-section {
    padding: 5px;
    border-radius: 5px;
}
#forge-modal .forge-dismantle-section-title {margin: 0 0 4px;font-size: 11px;}
#forge-modal .forge-dismantle-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-content: start;
    gap: 4px;
    max-height: 177px;
    min-height: 80px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}
#forge-modal .forge-dismantle-grid .forge-empty-state {
    grid-column: 1 / -1;
    padding: 6px 2px;
    font-size: 10px;
    line-height: 1.15;
}
#forge-modal .forge-dismantle-reward {
    margin-top: 6px;
    padding: 5px 8px;
    border-radius: 5px;
}
#forge-modal .forge-dismantle-reward-title {margin-bottom: 3px;font-size: 11px;}
#forge-modal .forge-dismantle-reward-list {gap: 1px;}
#forge-modal .forge-dismantle-reward-row {font-size: 11px;}
#forge-modal .forge-dismantle-note {margin: 4px 0;font-size: 9px;line-height: 1.2;}
#forge-modal .forge-dismantle-btn {margin-top: 3px;min-height: 38px;}

/* Rune enchantment: what is installed LEFT, cost RIGHT; rune row below. */
#forge-modal #forge-enchant-info:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-areas: "name name" "current cost" "runes runes" "action action";
    align-items: center;
    gap: 5px 7px;
    margin-top: 5px;
    padding: 7px 8px 8px;
    border-radius: 5px;
    background: rgba(244,222,176,.94);
    color: #382717;
}
#forge-modal #forge-enchant-item-name {
    grid-area: name;
    margin: 0;
    font-size: 12px;
    line-height: 1.2;
    color: #3c2817;
}
#forge-modal #forge-enchant-current {
    grid-area: current;
    min-width: 0;
    margin: 0;
    font-size: 11px;
    line-height: 1.2;
    color: #4b3321;
}
#forge-modal #forge-enchant-cost {
    grid-area: cost;
    min-width: 0;
    margin: 0;
    font-size: 11px;
    line-height: 1.2;
    color: #4b3321;
}
#forge-modal #forge-enchant-runes {
    grid-area: runes;
    min-width: 0;
    margin: 1px 0;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 4px;
    max-height: 70px;
    overflow-x: auto;
}
#forge-modal #forge-enchant-action {
    grid-area: action;
    width: 100%;
    min-height: 38px;
}

/* Gold-only item levels: two-by-two choices, details optional. */
#forge-modal #forge-gear-info:not([hidden]) {
    margin-top: 5px;
    padding: 7px 8px;
    border: 1px solid rgba(107,72,36,.3);
    border-radius: 5px;
    background: rgba(244,222,176,.65);
    color: #382717;
}
#forge-modal #forge-gear-info > p:first-child {
    margin: 0 0 5px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
#forge-modal .forge-gear-level-choices {
    gap: 5px !important;
}
#forge-modal .forge-gear-level-choices .forge-menu-btn {
    min-height: 46px;
    padding: 5px 4px;
    font-size: 11px;
    line-height: 1.15;
}
#forge-modal #forge-gear-info .forge-level-price-details {
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.2;
}
#forge-modal #forge-gear-info .forge-level-price-details summary {
    cursor: pointer;
    font-weight: 700;
}
#forge-modal #forge-gear-info .forge-level-price-details p {margin: 3px 0;}

/* Reset keeps its required confirmation modal but not a giant selection list. */
#forge-modal #forge-reset-panel > .forge-help-text {
    font-size: 10px;
    margin: 0 0 5px;
}
#forge-modal #forge-reset-items .forge-item-slot {cursor: pointer;}

@media (max-width: 370px) {
    #forge-modal .forge-modal-box {padding: 9px 8px 10px;}
    #forge-modal .forge-stat-preview-values,
    #forge-modal #forge-info .forge-stat-preview-name {font-size: 9px;}
    #forge-modal .forge-rank-preview-line {font-size: 9px;}
    #forge-modal .forge-dismantle-grid {max-height: 155px;}
}


/* OFFLINE TEST — home-only HUD, full-height secondary screens */
/* The canonical .main-screen.active class drives this without extra state.
   Includes Character sub-tabs (inventory and skills), Journal and Map. */
body:has(.main-screen.active:not(#screen-home)) #top-bar {
    display: none;
}

/* Return the old 125px HUD space to the selected screen.
   Keep 100px for the persistent 38px chat bar + 62px bottom navigation. */
body:has(.main-screen.active:not(#screen-home)) .main-screen.active {
    min-height: calc(100vh - 100px);
    min-height: calc(100dvh - 100px);
    padding-top: 4px;
}

/* Map viewport previously subtracted BOTH the HUD and bottom bars.
   Its actual height must grow when the HUD disappears. */
body:has(#screen-map.active) #screen-map {
    height: calc(100vh - 100px);
    height: calc(100dvh - 100px);
    padding-top: 6px;
}

/* Skills have an inner scrolling panel with their own height cap. */
body:has(#screen-skills.active) #screen-skills > .modal-window {
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
}