/* Responsive layout rules. */

@media (max-width: 980px) {
    .app-frame {
        grid-template-columns: 1fr;
    }

    .page-head,
    .detail-head {
        align-items: stretch;
        flex-direction: column;
    }

    .entity-grid,
    .weapon-family-grid,
    .result-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shop-browser {
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    }

    .mob-profile-top {
        grid-template-columns: minmax(220px, 1fr) minmax(150px, 210px);
    }

    .mob-drop-section {
        grid-template-columns: 1fr;
    }

    .shop-browser-detail {
        padding: 16px;
    }

    .mob-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mob-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .mob-search-form,
    .mob-filter-tabs,
    .mob-sort-form {
        grid-column: 1;
        grid-row: auto;
    }

    .mob-sort-form {
        justify-self: stretch;
        width: 100%;
    }

    .crafting-recipe-grid {
        min-width: 0;
    }

    .crafting-grid-head,
    .crafting-grid-row {
        grid-template-columns: minmax(72px, 0.72fr) minmax(140px, 2.25fr) minmax(54px, 0.46fr) minmax(78px, 0.7fr) minmax(70px, 0.62fr);
    }

}

@media (max-width: 860px) {
    .shop-browser {
        grid-template-columns: 1fr;
    }

    .shop-browser-list {
        position: static;
        max-height: 380px;
        min-height: 0;
    }
}

@media (max-width: 720px) {
    .shell {
        width: min(100% - 22px, 1180px);
    }

    .shop-browser,
    .detail-grid,
    .entity-grid,
    .weapon-family-grid,
    .result-columns {
        grid-template-columns: 1fr;
    }

    .page {
        padding-top: 24px;
    }

    .shop-browser-detail {
        min-height: 360px;
        padding: 16px;
    }

    .mob-profile-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .mob-profile-top,
    .mob-drop-section {
        grid-template-columns: 1fr;
    }

    .mob-spawn-split {
        grid-template-columns: 1fr;
    }

    .mob-spawn-group {
        height: 240px;
    }

    .mob-profile-art {
        min-height: 210px;
    }

    .mob-profile-art img {
        max-height: 200px;
    }

    .mob-info-table {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .mob-info-head {
        display: none;
    }

    .mob-info-cell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 38px;
        gap: 8px;
        border: 1px solid rgba(143, 106, 71, 0.52);
        border-radius: 8px;
        background: rgba(255, 248, 223, 0.68);
    }

    .mob-info-cell::before {
        content: attr(data-label);
        min-width: 0;
        overflow: hidden;
        color: #2f1809;
        font-size: 0.68rem;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mob-resistance-table {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .mob-resistance-head {
        display: none;
    }

    .mob-resistance-cell {
        grid-row: auto !important;
        grid-column: auto !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 38px;
        gap: 8px;
        border: 1px solid rgba(143, 106, 71, 0.52);
        border-radius: 8px;
        background: rgba(255, 248, 223, 0.68);
    }

    .mob-resistance-cell.is-empty {
        display: none;
    }

    .mob-resistance-cell::before {
        content: attr(data-label);
        min-width: 0;
        overflow: hidden;
        color: #2f1809;
        font-size: 0.68rem;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .shop-item-grid {
        --wiki-item-cell-size: 32px;

        grid-template-columns: repeat(auto-fill, 32px);
        gap: 2px;
    }

    .shop-item-tile {
        width: 32px;
    }

    .shop-tooltip {
        width: min(250px, calc(100vw - 56px));
    }

    .item-attribute-head,
    .item-attribute-row {
        grid-template-columns: minmax(96px, 0.9fr) minmax(0, 1.15fr);
    }

    .item-attribute-head span,
    .item-attribute-name,
    .item-attribute-values {
        padding: 7px 8px;
    }

    .item-attribute-name {
        font-size: 0.72rem;
    }

    .item-attribute-value {
        font-size: 0.76rem;
    }

    .crafting-grid-head,
    .crafting-grid-row {
        grid-template-columns: minmax(68px, 0.72fr) minmax(128px, 2.15fr) minmax(50px, 0.46fr) minmax(72px, 0.7fr) minmax(66px, 0.62fr);
    }

    .crafting-grid-cell {
        padding: 6px;
    }

    .crafting-item-tile--named {
        width: 68px;
    }

    .crafting-item-tile--icon-only {
        width: 36px;
        min-height: 36px;
    }

    .crafting-item-icon {
        width: 34px;
        height: 34px;
    }

    .refine-chain-panel summary {
        padding: 14px;
    }

    .refine-chain-title strong {
        font-size: 0.98rem;
    }

    .refine-chain-title small {
        font-size: 0.72rem;
    }

    .mob-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .mob-filter-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mob-card {
        min-height: 214px;
        padding: 4px;
    }

    .mob-card-head {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .mob-card-head strong {
        font-size: 0.78rem;
    }

    .mob-card-tags span {
        font-size: 0.72rem;
    }

    .mob-card-art {
        min-height: 118px;
    }

    .mob-card-art img {
        height: 112px;
    }

    .page-head h1,
    .detail-head h1 {
        font-size: 2.2rem;
    }

    .detail-title {
        align-items: flex-start;
    }

    .list-meta,
    .footer-inner {
        align-items: flex-start;
    }

    .list-meta {
        flex-direction: column;
    }
}

/* Portal responsive rules. */

@media (max-width: 1220px) {
    .class-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .class-card:nth-child(2n) {
        border-right: 0;
    }

    .custom-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 980px) {
    .app-frame {
        width: calc(100% - 36px);
    }

    .wiki-header-search {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
}

@media (max-width: 720px) {
    body {
        font-size: 14px;
    }

    .app-frame {
        width: calc(100% - 24px);
    }

    .wiki-header-search {
        grid-template-columns: 1fr;
    }

    .page {
        padding-right: 12px;
        padding-left: 12px;
    }

    .portal-link-grid--two,
    .portal-link-grid--three {
        grid-template-columns: 1fr;
    }

    .class-grid {
        grid-template-columns: 1fr;
    }

    .class-card,
    .class-card:nth-child(2n) {
        border-right: 0;
        border-bottom: 1px solid rgba(38, 28, 15, 0.3);
    }

    .class-card:last-child {
        border-bottom: 0;
    }

}

@media (max-width: 460px) {
    .class-card {
        grid-template-columns: 70px minmax(0, 1fr);
        padding: 12px;
    }

    .class-portraits img {
        width: 54px;
        height: 54px;
    }

}

/* Final Metin2 Wiki redesign overrides. Loaded last on purpose. */

.page-head,
.detail-head,
.entity-card,
.detail-panel,
.empty-state,
.admin-panel,
.shop-browser,
.shop-browser-detail,
.shop-browser-list,
.mob-profile-panel,
.mob-drop-panel,
.mob-spawn-panel,
.refine-chain-panel {
    border: 1px solid #88283a;
    border-top-left-radius: 15px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 0;
    background: #f5f5dc;
    box-shadow: 2px 2px 5px #000;
}

.page-head,
.detail-head {
    padding: 14px 16px;
}

.page-head h1,
.detail-head h1 {
    color: #221405;
    text-shadow: none;
}

.section-title h2,
.detail-panel h2,
.admin-panel h2 {
    border: 1px solid #3a1209;
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(255, 239, 179, 0.16), transparent 36%),
        linear-gradient(180deg, #8b6040, #3a1209);
    color: #fff5db;
    font-family: Tahoma, Arial, sans-serif;
    text-shadow: 1px 1px 2px #000;
}

.button,
.admin-danger-button,
.rich-entity-panel header button {
    border: 1px solid #3a1209;
    border-radius: 8px;
    background: #fbfae7;
    color: #24180d;
    text-shadow: none;
    box-shadow: 2px 2px 5px #000;
}

.button:hover,
.admin-danger-button:hover,
.rich-entity-panel header button:hover {
    background: #fffbe8;
    color: #8f2615;
}

.wiki-page-items .app-frame {
    margin-top: 6px;
}

.wiki-page-items .wiki-sidebar {
    padding-top: 0;
}

.content-wrap table,
.content-wrap th,
.content-wrap td {
    border-color: rgba(136, 40, 58, 0.45);
}

@media (max-width: 1700px) {
    .app-frame {
        width: min(100em, calc(100% - 2em));
        grid-template-columns: 14em 1000px;
    }
}

@media (max-width: 1600px) {
    .wiki-masthead {
        --wiki-logo-track: 15em;
        grid-template-columns: var(--wiki-logo-track) minmax(200px, 1fr) var(--wiki-user-track);
    }

    .wiki-portal-shell .wiki-logo {
        padding-right: 0.45em;
        padding-left: 0.55em;
        font-size: 1.3rem;
    }
}

@media (max-width: 1500px) {
    .wiki-logo {
        padding-left: 3em;
    }

    .wiki-header-search {
        margin-right: 1.5em;
    }

    .app-frame {
        gap: 0;
        margin-left: auto;
    }

    .wiki-home-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wiki-home-side {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .custom-panel {
        grid-column: auto;
    }
}

@media (max-width: 1180px) {
    body {
        padding-top: 68px;
        background-size: auto 100vh;
    }

    .wiki-masthead {
        --wiki-logo-track: 18em;
        grid-template-columns: var(--wiki-logo-track) minmax(180px, 1fr) var(--wiki-user-track);
    }

    .wiki-logo {
        max-width: min(44vw, 28em);
        padding-left: 22px;
        font-size: 1.85rem;
    }

    .wiki-portal-shell .wiki-logo {
        max-width: 100%;
        padding-right: 0.45em;
        font-size: 1.2rem;
    }

    .app-frame {
        display: block;
        width: min(100% - 24px, 1040px);
        margin: 34px auto 0;
    }

    .wiki-sidebar {
        display: none;
    }

    .content-wrap {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        min-height: 720px;
    }

    .page {
        padding-right: 24px;
        padding-left: 24px;
    }

}

@media (max-width: 860px) {
    body {
        padding-top: 126px;
    }

    .wiki-masthead {
        grid-template-columns: minmax(0, 1fr) auto;
        height: 126px;
        row-gap: 8px;
        padding: 8px 12px 10px;
    }

    .wiki-logo {
        max-width: 100%;
        padding: 0;
    }

    .wiki-header-search {
        grid-column: 1 / -1;
        width: 100%;
        margin: 0;
    }

    .rich-editor-shell.is-fullscreen {
        inset: 126px 0 0;
    }

    .wiki-home-grid,
    .wiki-home-column,
    .wiki-home-side,
    .portal-link-grid--two,
    .portal-link-grid--three,
    .wiki-link-columns {
        grid-template-columns: 1fr;
    }

    .wiki-home-grid > .wiki-home-column {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 620px) {
    .app-frame {
        width: calc(100% - 14px);
        margin-top: 18px;
    }

    .content-wrap {
        border-right: 0;
        border-left: 0;
    }

    .class-card,
    .class-card:nth-child(2n),
    .class-card:last-child {
        grid-column: auto;
        border-right: 0;
        border-top: 0;
        border-bottom: 1px solid #5d3210;
    }

    .class-card:last-child {
        border-bottom: 0;
    }

    .kingdom-table {
        width: 100%;
        font-size: 0.82rem;
    }

}