/* Wide offline layouts share the same screens, controls and art as the phone. */
#main-bottom-nav .desktop-inventory-nav { display: none; }

.skills-book-battle-column,
.skills-book-library { display: contents; }

@media (min-width: 768px) {
    #top-bar {
        position: relative;
        grid-template-columns: repeat(3, minmax(0, 220px));
        grid-template-rows: 66px;
        justify-content: center;
        align-items: center;
        min-height: 0;
        gap: 8px;
        padding: 4px 16px;
    }

    #top-bar .top-hp-btn,
    #top-bar .top-mp-block,
    #top-bar .top-menu-wrap {
        grid-row: 1;
        height: 62px;
        min-height: 0;
    }

    #top-bar .top-hp-btn { grid-column: 1; }
    #top-bar .top-mp-block { grid-column: 2; }
    #top-bar .top-menu-wrap { grid-column: 3; }

    #screen-home,
    #screen-character,
    #screen-inventory,
    #screen-skills,
    #screen-journal {
        width: min(100%, 1040px);
        margin-inline: auto;
    }

    #screen-home #transitions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        align-items: start;
        gap: 10px;
    }

    #transitions > :not(.trans-btn) {
        grid-column: 1 / -1;
        min-width: 0;
    }

    #screen-character #modal-content,
    #screen-inventory #inv-content,
    #screen-skills > .modal-window,
    #screen-journal .orbis-nav-panel {
        width: calc(100% - 24px);
        margin-inline: auto;
    }

    /* The existing tab renderer only displays equipment in the bag tab. */
    #screen-inventory #inv-content:has([data-inventory-tab="bag"].active) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        grid-template-rows: repeat(5, auto) minmax(0, 1fr);
        gap: 8px 16px;
        align-items: start;
    }

    #screen-inventory #inv-content:has([data-inventory-tab].active:not([data-inventory-tab="bag"])) {
        max-width: 760px;
    }

    #inv-content > .orbis-section-tabs { grid-area: 1 / 1 / 2 / -1; }

    #inventory-equipment-block {
        grid-area: 2 / 1 / 7 / 2;
        min-width: 0;
        margin: 0;
    }

    #inventory-equipment-block #equip-grid {
        --equip-slot-size: clamp(58px, 7vw, 86px);
        max-width: 440px;
        margin-inline: auto;
    }

    #inv-content > #inventory-tabs { grid-area: 2 / 2; margin: 0; }
    #inv-content > #inventory-coins-bar { grid-area: 3 / 2; margin: 0; }
    #inv-content > .inventory-storage-header { grid-area: 4 / 2; margin: 0; }
    #inv-content > #inventory-quickbar { grid-area: 5 / 2; }
    #inv-content > #bag-grid { grid-area: 6 / 2; min-width: 0; margin: 0; }

    #shop-content,
    #workshop-content,
    #forge-modal .forge-modal-box {
        width: min(94vw, 740px);
        max-width: 740px;
    }
}

@media (min-width: 1100px) {
    body {
        display: grid;
        grid-template-columns: clamp(158px, 13vw, 216px) minmax(0, 1fr) clamp(206px, 19vw, 318px);
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas:
            "hud hud hud"
            "nav content chat";
        height: 100dvh;
        min-height: 0;
        padding: 0;
        overflow: hidden;
    }

    #top-bar { grid-area: hud; }

    #top-bar::before {
        content: "ORBIS RPG";
        position: absolute;
        top: 50%;
        left: 24px;
        transform: translateY(-50%);
        color: #f3d9a0;
        font: 700 19px/1 Georgia, serif;
        letter-spacing: .11em;
        pointer-events: none;
    }

    #main-bottom-nav {
        grid-area: nav;
        position: relative;
        inset: auto;
        width: auto;
        height: auto;
        min-height: 0;
        padding: 14px 8px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 7px;
        overflow-y: auto;
        border: 0;
        border-right: 1px solid #9d7945;
    }

    #main-bottom-nav .main-bottom-nav-btn {
        flex: 0 0 54px;
        width: 100%;
        min-width: 0;
        flex-direction: row;
        justify-content: flex-start;
        padding: 6px 9px;
        gap: 8px;
        border: 1px solid #866039;
        border-radius: 7px;
        background: linear-gradient(145deg, #402819, #201510);
        font-size: 14px;
        text-align: left;
    }

    #main-bottom-nav .main-bottom-nav-btn.active {
        border-color: #c69b58;
        background: linear-gradient(145deg, #254a68, #13263c);
    }

    #main-bottom-nav .main-bottom-nav-btn > span { white-space: normal; }
    #main-bottom-nav .main-bottom-nav-icon { width: 35px; height: 35px; transform: none; }
    #main-bottom-nav .main-bottom-nav-btn-inactive { display: none; }
    #main-bottom-nav .desktop-inventory-nav { display: flex; }

    #main-bottom-nav button:focus-visible,
    #top-bar button:focus-visible {
        outline: 2px solid #78ccf8;
        outline-offset: -2px;
    }

    body > .main-screen.active,
    body:has(.main-screen.active:not(#screen-home)) > .main-screen.active {
        grid-area: content;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 14px clamp(12px, 1.7vw, 30px) 20px;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        scrollbar-color: #956e42 transparent;
    }

    body:has(#screen-map.active) #screen-map {
        height: 100%;
    }

    #screen-map .world-map-shell { width: min(100%, 1200px); }

    #screen-home #location-card,
    #screen-home #transitions {
        width: min(100%, 1120px);
        margin-inline: auto;
    }

    #screen-home #location-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        min-height: clamp(218px, 36dvh, 380px);
        padding: clamp(16px, 2.3vw, 36px);
        color: #ffebc0;
        background:
            linear-gradient(180deg, #100b0933 22%, #120d0be8 100%),
            var(--location-scene-art, radial-gradient(ellipse at 50% 25%, #6b4b3266, transparent 65%)) center / cover no-repeat,
            url("../assets/ui/wood-texture.svg") #20150f;
        box-shadow: 0 12px 26px #0008;
    }

    #screen-home #location-title {
        margin-bottom: 6px;
        color: #ffe4a8;
        font-size: clamp(23px, 2.25vw, 38px);
        text-shadow: 0 2px 6px #000;
    }

    #screen-home #location-desc {
        max-width: 60ch;
        padding: 0;
        color: #f8e7c4;
        background: none;
        font-size: 16px;
        line-height: 1.45;
        text-shadow: 0 1px 5px #000;
    }

    #screen-home #city-presence { color: inherit; }

    #screen-home #transitions {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 188px), 1fr));
        padding: 14px;
        border: 1px solid #866039;
        border-radius: 9px;
        background: url("../assets/ui/wood-texture.svg") #20160e;
    }

    #screen-home .city-service-row,
    #screen-home .guild-action-row,
    #screen-home .location-mob-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 182px), 1fr));
        gap: 8px;
    }

    #screen-home .location-mob-list {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    }

    #screen-home .trans-btn,
    #screen-home .city-service-btn { min-height: 48px; }

    #screen-character #modal-content { max-width: 810px; }
    #screen-inventory #inv-content,
    #screen-journal .orbis-nav-panel { max-width: 1100px; }
    #screen-skills > .modal-window {
        max-width: 1100px;
        overflow: visible;
    }

    body:has(#screen-skills.active) #screen-skills > .modal-window {
        max-height: none;
    }

    #screen-skills #skills-list-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
        align-items: start;
        gap: 16px;
        overflow: visible;
    }

    #screen-skills .skills-book-battle-column,
    #screen-skills .skills-book-library {
        display: block;
        min-width: 0;
    }

    #screen-skills .skills-book-library {
        padding-left: 14px;
        border-left: 1px solid #946b435c;
    }

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

    #game-log-shell {
        grid-area: chat;
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        align-self: start;
        max-height: none;
        min-height: 0;
        border-radius: 0;
        overflow: hidden;
        transition: none;
    }

    #game-log-shell.expanded { align-self: stretch; height: 100%; max-height: none; }
    #game-log-shell #game-log-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #game-log-shell #social-composer { flex-wrap: wrap; }
    #game-log-shell #social-chat-input { flex-basis: 100%; }
    #game-log-shell #social-friends-panel { inset: 36px 0 0; }

    /* V6 controls keep their original order and event targets. */
    #battle-arena {
        padding-inline: max(16px, calc((100vw - 1200px) / 2)) !important;
        overflow-y: auto !important;
    }

    #battle-stage-preview {
        min-height: min(240px, 35dvh) !important;
    }

    #battle-action-panel {
        width: min(100%, 730px) !important;
        max-width: 730px !important;
    }

    #battle-action-panel .battle-compact-layout-v6 {
        grid-template-columns: minmax(120px, 155px) minmax(0, 1fr) !important;
    }

    #battle-action-panel .battle-compact-layout-v6::before { display: none; }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
    #main-bottom-nav button:hover:not(:disabled),
    #screen-home #transitions button:hover:not(:disabled) { filter: brightness(1.15); }
}