/* ==========================================================================
   SKYSTONE - CASTLE SIEGE V16.3
   Composição restaurada do SkyStone antigo.
   Main oficial: 535px.
   ========================================================================== */

body.template-skystone .sky-castle-siege {
    position: relative;
    width: 100%;
    min-height: 185px;

    margin: 10px 0 0;
    padding: 0;

    overflow: hidden;

    border: 1px solid rgba(106,164,178,.24);

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.08) 0%,
            rgba(255,255,255,.62) 30%,
            rgba(255,255,255,.95) 44%,
            rgba(255,255,255,.98) 100%
        ),
        url("../../images/castle-siege-bg.jpg")
        left center / 42% 100% no-repeat,
        #fff;

    box-shadow: 0 7px 22px rgba(58,104,119,.07);

    box-sizing: border-box;
}

/* Moldura ornamental antiga. */
body.template-skystone .sky-castle-siege::before,
body.template-skystone .sky-castle-siege::after {
    content: "";

    position: absolute;
    left: 0;
    z-index: 4;

    width: 100%;
    height: 15px;

    pointer-events: none;

    background-repeat: no-repeat;
    background-size: 100% auto;
}

body.template-skystone .sky-castle-siege::before {
    top: 0;

    background-image:
        url("../../images/fon-bg-account-top.png");

    background-position: center top;
}

body.template-skystone .sky-castle-siege::after {
    bottom: 0;

    background-image:
        url("../../images/fon-bg-account-bottom.png");

    background-position: center bottom;
}

/* A camada antiga .art não é mais necessária. */
body.template-skystone .sky-castle-siege__art {
    display: none;
}

body.template-skystone .sky-castle-siege__content {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 185px;

    margin: 0;

    padding: 21px 18px 18px 39%;

    display: grid;
    grid-template-columns: 1.08fr .92fr;
    grid-template-areas:
        "head head"
        "owner next"
        "owner note";

    column-gap: 17px;
    row-gap: 5px;

    box-sizing: border-box;
}

/* Cabeçalho -------------------------------------------------------------- */

body.template-skystone .sky-castle-siege__head {
    grid-area: head;

    margin: 0;
    padding: 0 0 7px;

    border-bottom: 1px solid #dcebed;
}

body.template-skystone .sky-castle-siege__head span {
    display: block;

    margin: 0 0 4px;

    color: #70a4b4;

    font-size: 6px;
    line-height: 1;
    letter-spacing: 1.2px;
}

body.template-skystone .sky-castle-siege__head h3 {
    margin: 0;

    color: #075f78;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

/* Guild dona ------------------------------------------------------------- */

body.template-skystone .sky-castle-siege__owner {
    grid-area: owner;

    display: grid;
    grid-template-columns: 52px minmax(0,1fr);
    gap: 9px;
    align-items: center;

    padding-top: 6px;
}

body.template-skystone .sky-castle-siege__mark {
    width: 50px;
    height: 50px;

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

    overflow: hidden;

    border: 1px solid #cfe3e7;

    background: rgba(245,251,252,.90);

    color: #1689a6;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 700;

    box-sizing: border-box;
}

body.template-skystone
.sky-castle-siege__mark
.castle-siege-mark-svg {
    display: block !important;

    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
}

body.template-skystone .sky-castle-siege__owner-copy {
    min-width: 0;
}

body.template-skystone .sky-castle-siege__owner-copy small,
body.template-skystone .sky-castle-siege__next small {
    display: block;

    color: #74a0ad;

    font-size: 5.5px;
    line-height: 1;
    letter-spacing: .7px;
}

body.template-skystone .sky-castle-siege__owner-copy strong {
    display: block;

    margin: 4px 0 5px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #075f78;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

body.template-skystone .sky-castle-siege__owner-copy > span {
    display: block;

    color: #789aa6;

    font-size: 5.7px;
    line-height: 1.2;
}

body.template-skystone .sky-castle-siege__owner-copy b {
    color: #075f78;
}

/* Próximo confronto ------------------------------------------------------ */

body.template-skystone .sky-castle-siege__next {
    grid-area: next;

    min-width: 0;

    margin-top: 6px;
    padding: 3px 0 0 12px;

    border-left: 1px solid #dcebed;
}

body.template-skystone .sky-castle-siege__next strong {
    display: block;

    margin: 5px 0 4px;

    color: #075f78;

    font-size: 8px;
    font-weight: 700;
    line-height: 1.1;
}

body.template-skystone .sky-castle-siege__next time {
    display: block;

    color: #789ba6;

    font-size: 5.7px;
    line-height: 1.1;
}

body.template-skystone .sky-castle-siege__note {
    grid-area: note;

    align-self: start;

    margin: 0;
    padding: 4px 5px;

    border: 1px solid #d7e8eb;

    background: rgba(241,249,250,.86);

    color: #789aa5;

    font-size: 5.5px;
}

/* Sidebar --------------------------------------------------------------- */

body.template-skystone .sky-sidebar .sky-castle-siege {
    min-height: 170px;

    background:
        linear-gradient(
            rgba(255,255,255,.78),
            rgba(255,255,255,.96)
        ),
        url("../../images/castle-siege-bg.jpg")
        center center / cover no-repeat,
        #fff;
}

body.template-skystone .sky-sidebar .sky-castle-siege__content {
    min-height: 170px;

    padding: 18px 11px 15px;

    grid-template-columns: 1fr;
    grid-template-areas:
        "head"
        "owner"
        "next"
        "note";

    row-gap: 5px;
}

body.template-skystone .sky-sidebar .sky-castle-siege__head h3 {
    font-size: 13px;
}

body.template-skystone .sky-sidebar .sky-castle-siege__next {
    margin-top: 3px;
    padding: 6px 0 0;

    border-left: 0;
    border-top: 1px solid #dcebed;
}