:root {
    --dark: #241b14;
    --dark2: #39291c;
    --brown: #59402a;
    --brown2: #765333;
    --gold: #b28b50;
    --gold-light: #dfc18a;
    --paper: #dfcfaa;
    --paper-light: #f0e4c8;
    --paper-dark: #c8b38b;
    --text: #392817;
    --border: #96764a;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;

    background-color: #30241a;
    background-image:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(139, 105, 62, .35),
            transparent 65%
        ),
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.018) 0px,
            rgba(255,255,255,.018) 1px,
            transparent 1px,
            transparent 4px
        );
}

a {
    color: #76502c;
}

a:hover {
    color: #a0783f;
}

.site-wrap {
    width: calc(100% - 28px);
    max-width: 1240px;
    margin: 28px auto;
}

.site-frame {
    position: relative;
    border: 5px ridge #917044;
    background: var(--paper);
    box-shadow:
        0 0 0 1px #382719,
        0 12px 40px rgba(0,0,0,.65);
}

/* HEADER */

.masthead {
    min-height: 125px;
    padding: 20px 26px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    color: #ead5a8;

    background:
        radial-gradient(
            ellipse at 20% 50%,
            rgba(130,95,49,.28),
            transparent 60%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.012) 0,
            rgba(255,255,255,.012) 1px,
            transparent 1px,
            transparent 5px
        ),
        linear-gradient(135deg, #493725, #211912);

    border-bottom: 5px ridge #a1814e;
}

.brand {
    display: flex;
    align-items: center;
    gap: 17px;
    color: #e8d09b;
    text-decoration: none;
}

.brand strong {
    display: block;
    font-family: Georgia, serif;
    font-size: 43px;
    letter-spacing: 7px;
    text-shadow:
        2px 2px 2px #000,
        0 0 12px rgba(213,173,103,.2);
}

.brand small {
    display: block;
    margin-top: 7px;
    color: #c4a879;
    font-size: 9px;
    letter-spacing: 3px;
}

.brand-emblem {
    color: #d5ad68;
    font-size: 46px;
    text-shadow: 0 2px 5px #000;
}

.header-tools {
    text-align: right;
}

.language-switch {
    margin-bottom: 14px;
    color: #bda47c;
    font-weight: bold;
}

.language-switch a {
    display: inline-block;
    padding: 6px 10px;
    color: #d9c69e;
    text-decoration: none;
    border: 1px solid transparent;
}

.language-switch a:hover,
.language-switch a.active {
    color: #fff0c8;
    background: linear-gradient(#80613d, #523b25);
    border: 1px solid #b8955c;
}

.edition {
    color: #cbb38b;
    font-size: 10px;
    letter-spacing: 1.5px;
}

/* DEKORACYJNY PASEK */

.ornament-bar {
    padding: 8px;
    text-align: center;

    color: #f0ddb2;
    font-family: Georgia, serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 5px;

    background:
        linear-gradient(#927044, #674a2d);

    border-bottom: 3px ridge #b28b52;
    text-shadow: 1px 1px #302014;
}

/* GŁÓWNY UKŁAD */

.layout-grid {
    display: grid;
    grid-template-columns: 205px minmax(0, 1fr) 205px;
    align-items: start;
    gap: 13px;

    padding: 15px;

    background:
        linear-gradient(
            135deg,
            #d2c09a,
            #e0d0ae 50%,
            #cbb993
        );
}

/* PANELE */

.panel {
    background: var(--paper-light);
    border: 1px solid #8d7047;

    box-shadow:
        inset 0 0 0 2px #f8eed7,
        inset 0 0 0 3px #d1bd96,
        0 2px 5px rgba(48,31,15,.23);
}

.panel-heading {
    margin: 0;
    padding: 11px 12px;

    color: #f3e2bd;
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: .6px;
    text-transform: uppercase;

    background:
        linear-gradient(
            180deg,
            #80613e 0%,
            #65482c 55%,
            #513a25 100%
        );

    border-bottom: 3px ridge #b18e59;
    text-shadow: 1px 1px 2px #21150c;
}

.content-panel .panel-heading {
    font-size: 16px;
    text-transform: none;
}

/* LEWE MENU */

.navigation {
    padding: 8px;
    background: #e4d5b5;
}

.nav-link {
    display: block;
    margin-bottom: 4px;
    padding: 9px 8px;

    color: #4b3823;
    text-decoration: none;
    font-size: 11px;

    background:
        linear-gradient(
            180deg,
            #f4e9d1,
            #dfcba4
        );

    border: 1px solid #c1a77b;
    box-shadow: inset 0 1px 0 #fff8e7;

    transition:
        background .15s,
        color .15s,
        border-color .15s;
}

.nav-link:hover,
.nav-link.active {
    color: #fff0c8;

    background:
        linear-gradient(
            180deg,
            #896a43,
            #604329
        );

    border-color: #a98a56;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

.nav-arrow {
    margin-right: 7px;
    color: #a77c3e;
    font-weight: bold;
}

.nav-link:hover .nav-arrow,
.nav-link.active .nav-arrow {
    color: #f1d18b;
}

/* GŁÓWNA TREŚĆ */

.content-panel {
    min-height: 440px;
}

.panel-body {
    padding: 16px;
    line-height: 1.75;
}

.panel-body.compact {
    padding: 11px;
}

.welcome-box {
    position: relative;
    margin-bottom: 21px;
    padding: 17px;

    background:
        linear-gradient(
            135deg,
            #f6ecd5,
            #e4d1aa
        );

    border: 1px solid #b89b6c;
    box-shadow:
        inset 0 0 0 2px #fff8e7,
        0 2px 4px rgba(60,40,20,.12);
}

.lead {
    margin: 0;
    color: #49351f;
    font-family: Georgia, serif;
    font-size: 14px;
    line-height: 1.9;
}

.section-heading {
    margin: 20px 0 13px;
    padding-bottom: 9px;

    color: #65482b;
    font-family: Georgia, serif;
    font-size: 18px;

    border-bottom: 2px solid #b69a6c;
}

.news-entry {
    margin-top: 14px;
    padding: 16px;

    background:
        linear-gradient(
            135deg,
            #f5ebd5,
            #e9dbbb
        );

    border: 1px solid #c3aa7e;
    box-shadow:
        inset 0 0 0 1px #fff6e1,
        0 2px 4px rgba(50,30,10,.1);
}

.news-date {
    color: #856744;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: .4px;
}

.news-entry h3 {
    margin: 13px 0;
    color: #68482a;
    font-family: Georgia, serif;
    font-size: 17px;
}

.news-entry p {
    line-height: 1.9;
}

/* INFORMACJE O SERWERZE */

.server-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.fact {
    padding: 14px;

    background: #f1e5ca;
    border: 1px solid #c4aa7c;
    box-shadow: inset 0 0 0 1px #fff6e4;
}

.fact span,
.fact strong {
    display: block;
}

.fact span {
    margin-bottom: 7px;
    color: #806644;
    font-size: 11px;
}

.fact strong {
    color: #45311e;
    overflow-wrap: anywhere;
}

/* PRAWA KOLUMNA */

.info-row {
    padding: 8px 0;
    border-bottom: 1px solid #c9b38c;
}

.info-row:last-child {
    border-bottom: 0;
}

.info-row span,
.info-row strong {
    display: block;
}

.info-row span {
    color: #826744;
    font-size: 10px;
}

.info-row strong {
    margin-top: 4px;
    color: #46311d;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.account-panel {
    margin-top: 13px;
}

.account-panel p {
    line-height: 1.8;
}

.classic-button {
    display: block;
    margin-top: 13px;
    padding: 10px;

    color: #f7e8c6;
    text-align: center;
    text-decoration: none;
    font-weight: bold;

    background:
        linear-gradient(
            180deg,
            #927044,
            #684a2c
        );

    border: 1px solid #a88a58;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

.classic-button:hover {
    color: #fff4d8;
    background: linear-gradient(#a07d4d, #765535);
}

/* KOMUNIKATY */

.notice-box {
    margin-top: 15px;
    padding: 17px;

    background: #f1e5ca;
    border: 1px solid #bca174;
    box-shadow: inset 0 0 0 1px #fff5df;

    line-height: 1.8;
}

.notice-box h3 {
    margin-top: 0;
    color: #704c2d;
    font-family: Georgia, serif;
}

/* STOPKA */

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    padding: 16px 20px;

    color: #ddc89e;
    font-size: 10px;

    background:
        linear-gradient(
            180deg,
            #463323,
            #291e15
        );

    border-top: 4px ridge #98764b;
}

.footer span:last-child {
    color: #c6a979;
}

/* ZAZNACZENIE */

::selection {
    color: #fff3d3;
    background: #70502e;
}

/* TABLETY */

@media (max-width: 950px) {
    .layout-grid {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .right-column {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px;
    }

    .account-panel {
        margin-top: 0;
    }
}

/* TELEFONY */

@media (max-width: 620px) {
    .site-wrap {
        width: calc(100% - 12px);
        margin: 7px auto;
    }

    .site-frame {
        border-width: 3px;
    }

    .masthead {
        min-height: auto;
        padding: 17px 12px;
        align-items: flex-start;
        flex-direction: column;
    }

    .brand strong {
        font-size: 31px;
        letter-spacing: 4px;
    }

    .brand-emblem {
        font-size: 35px;
    }

    .header-tools {
        width: 100%;
        text-align: left;
    }

    .edition {
        font-size: 9px;
    }

    .layout-grid {
        grid-template-columns: 1fr;
        padding: 9px;
        gap: 11px;
    }

    .right-column {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .server-facts {
        grid-template-columns: 1fr;
    }

    .content-panel {
        min-height: 300px;
    }

    .footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* MORTALIS ORIGINAL GRAPHICS */

.masthead {
    background-image:
        url("/assets/header-pattern.svg"),
        radial-gradient(
            ellipse at 20% 50%,
            rgba(130,95,49,.28),
            transparent 60%
        ),
        linear-gradient(135deg, #493725, #211912);

    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 180px 180px, auto, auto;
}

.brand-emblem {
    display: block;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    object-fit: contain;
    font-size: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.65));
}

.ornament-bar {
    background-image:
        url("/assets/ornament-divider.svg"),
        linear-gradient(#927044, #674a2d);

    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 760px 100%, 100% 100%;
}

@media (max-width: 620px) {
    .brand-emblem {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .ornament-bar {
        background-size: 100% 100%, 100% 100%;
    }
}

/* =========================================
   MORTALIS HOME STAGE 2
   Classic Tibia inspired interface
   ========================================= */

.home-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 23px 20px;
    margin-bottom: 25px;
    background: linear-gradient(135deg, #f2e6c9, #e2d0aa);
    border: 1px solid #b99a63;
    box-shadow: inset 0 0 0 1px #fff6df;
}

.home-hero-content {
    flex: 1;
    min-width: 0;
}

.home-eyebrow {
    margin-bottom: 10px;
    color: #896638;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 2px;
}

.home-hero h2 {
    margin: 0 0 12px;
    color: #583b21;
    font-family: Georgia, serif;
    font-size: 23px;
    line-height: 1.3;
}

.home-hero p {
    margin: 0 0 18px;
    color: #392817;
    font-size: 12px;
    line-height: 1.8;
}

.home-hero-mark {
    flex: 0 0 105px;
    padding-left: 17px;
    border-left: 1px solid #c5ad7c;
    text-align: center;
}

.home-hero-mark img {
    display: block;
    width: 86px;
    height: 86px;
    margin: 0 auto 7px;
}

.home-hero-mark span {
    display: block;
    color: #80603a;
    font-size: 9px;
    letter-spacing: 2px;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.home-primary-link {
    display: inline-block;
    padding: 10px 16px;
    color: #fff0ce;
    background: linear-gradient(#89653a, #624326);
    border: 1px solid #54371d;
    box-shadow: inset 0 1px rgba(255,255,255,.2);
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
}

.home-primary-link:hover {
    background: linear-gradient(#a17a49, #765332);
}

.home-secondary-link {
    color: #674725;
    font-size: 11px;
    font-weight: bold;
    text-decoration: underline;
}

.home-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #bda577;
}

.home-section-header .section-heading {
    margin: 0;
    padding: 0;
    border: 0;
}

.home-section-link {
    flex-shrink: 0;
    color: #78552e;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
}

.home-section-link:hover {
    text-decoration: underline;
}

.home-news-entry {
    margin-top: 0;
}

.home-news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.news-category {
    display: inline-block;
    padding: 3px 7px;
    color: #75532d;
    background: #e9d9b7;
    border: 1px solid #c8ae7d;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 1px;
}

.status-line {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
}

.status-indicator {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0,0,0,.08);
}

.status-indicator.is-online {
    background: #398b43;
}

.status-indicator.is-offline {
    background: #b44235;
}

.status-line strong {
    color: #49331e;
    font-size: 12px;
}

.status-caption {
    margin: 7px 0 0;
    color: #806747;
    font-size: 10px;
    line-height: 1.5;
}

@media (max-width: 700px) {

    .home-hero {
        padding: 16px;
    }

    .home-hero-mark {
        display: none;
    }

    .home-hero h2 {
        font-size: 19px;
    }

    .home-hero-actions {
        align-items: stretch;
    }

    .home-primary-link {
        text-align: center;
    }

}



/* MORTALIS NEWS IMAGE DISPLAY V1 */

.news-entry-image {
    margin: 0 0 14px;
    overflow: hidden;
    border: 1px solid #c3aa7e;
    background: #2a1e14;
}

.news-entry-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: contain;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .news-entry-image {
        margin-bottom: 11px;
    }

    .news-entry-image img {
        max-height: 220px;
    }
}