/* =========================================================
   THE WOUNDED LEGACY
   HOME — V14
   Layout/sidebar/header compartilhados fora deste arquivo
========================================================= */

:root {
--dark: #15182B;
    --dark-2: #101321;
    --dark-3: #0B0E1A;

    --gold: #B29758;
    --gold-light: #CFB46D;

    --cream: #E8E2D5;
    --text: #CBC6BD;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    min-width: 0;
    min-height: 100vh;

    overflow-x: hidden;

    background: var(--dark);
    color: var(--text);

    font-family: "Poppins", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}


/* =========================================================
   LAYOUT GERAL
========================================================= */


/* =========================================================
   SIDEBAR
========================================================= */


/* =========================================================
   LOGO
========================================================= */


/* =========================================================
   MENU LATERAL
========================================================= */


/* =========================================================
   DISCORD
========================================================= */


/* =========================================================
   HEADER
========================================================= */


/* =========================================================
   LINKS DO HEADER
========================================================= */


/* =========================================================
   HEADER RIGHT
========================================================= */


/* =========================================================
   BUSCA
========================================================= */


/* =========================================================
   JOGUE AGORA
========================================================= */


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    min-width: 0;

    flex: 1;

    overflow: hidden;

    background:
        url("../images/hero.png")
        center center /
        cover
        no-repeat;
}

.hero-overlay {
    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(8,12,28,.93) 0%,
            rgba(10,14,31,.82) 33%,
            rgba(13,17,35,.61) 65%,
            rgba(14,18,36,.48) 100%
        ),

        linear-gradient(
            180deg,
            rgba(10,13,28,.20) 0%,
            rgba(15,18,36,.38) 52%,
            rgba(21,24,43,.91) 100%
        );

    pointer-events: none;
}

.hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    height: 130px;

    background:
        linear-gradient(
            to top,
            var(--dark) 0%,
            rgba(21,24,43,.94) 25%,
            rgba(21,24,43,.58) 60%,
            rgba(21,24,43,0) 100%
        );

    pointer-events: none;
}


/* =========================================================
   CONTEÚDO CENTRAL
========================================================= */

.hero-content {
    position: relative;

    z-index: 5;

    width:
        min(
            1180px,
            calc(100% - 70px)
        );

    margin:
        0 auto;

    padding:
        50px
        0
        60px;
}


/* =========================================================
   TÍTULO
========================================================= */

.hero-intro {
    width:
        min(
            100%,
            690px
        );
}

.eyebrow {
    margin-bottom: 11px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: var(--gold);

    font-family:
        "Cinzel",
        serif;

    font-size: 9px;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}

.eyebrow::before,
.eyebrow::after {
    content: "";

    width: 30px;
    height: 1px;

    background:
        rgba(178,151,88,.65);
}

.hero-title {
    margin: 0;

    font-family:
        "Cinzel",
        serif;

    font-size:
        clamp(
            52px,
            4.2vw,
            70px
        );

    line-height: .96;

    font-weight: 500;

    letter-spacing: -.4px;

    text-transform: uppercase;
}

.hero-title span {
    display: block;
}

.hero-title .gold {
    color: var(--gold);
}

.hero-title .light {
    color: #EEE7DC;
}


/* =========================================================
   BARRA DECORATIVA
========================================================= */

.title-divider {
    position: relative;

    width:
        min(
            285px,
            68%
        );

    height: 26px;

    margin:
        16px 0;
}

.title-divider::before {
    content: "";

    position: absolute;

    top: 50%;

    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            to right,
            rgba(178,151,88,.95),
            rgba(178,151,88,.08)
        );
}

.title-divider::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 34%;

    width: 8px;
    height: 8px;

    border:
        1px solid var(--gold);

    background:
        rgba(21,24,43,.25);

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* =========================================================
   DESCRIÇÃO
========================================================= */

.hero-description {
    max-width: 650px;

    margin: 0;

    color: #DDD5C7;

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   LORE RESUMIDA
========================================================= */

.lore-summary {
    width:
        min(
            100%,
            1080px
        );

    margin-top: 40px;

    padding-top: 25px;

    border-top:
        1px solid rgba(178,151,88,.22);
}

.lore-heading {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 11px;
}

.lore-kicker {
    color: var(--gold);

    font-family:
        "Cinzel",
        serif;

    font-size: 10px;

    letter-spacing: .9px;

    text-transform: uppercase;
}

.lore-line {
    width: 54px;
    height: 1px;

    background:
        linear-gradient(
            to right,
            var(--gold),
            transparent
        );
}

.lore-summary p {
    margin: 0;

    color: #DDD6C8;

    font-size: 12.5px;

    line-height: 1.82;

    text-align: justify;

    text-wrap: pretty;
}


/* =========================================================
   BOTÃO
========================================================= */

.history-action {
    margin-top: 28px;
}

.hero-story-button {
    position: relative;

    min-width: 230px;
    height: 50px;

    padding:
        0 20px;

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

    color: var(--dark-3);

    background: var(--gold);

    border:
        1px solid rgba(31,32,50,.42);

    font-family:
        "Cinzel",
        serif;

    font-size: 10px;

    letter-spacing: .9px;

    text-transform: uppercase;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.hero-story-button::before {
    content: "";

    position: absolute;

    inset: 4px;

    border:
        1px solid rgba(31,32,50,.35);

    pointer-events: none;
}

.hero-story-button:hover {
    transform:
        translateY(-2px);

    background:
        #C7A960;

    box-shadow:
        0 8px 20px
        rgba(0,0,0,.18);
}


/* =========================================================
   CARDS
========================================================= */

.feature-grid {
    width:
        min(
            100%,
            1080px
        );

    margin-top: 30px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 14px;
}

.feature-card {
    position: relative;

    min-width: 0;
    min-height: 116px;

    padding: 16px;

    display: flex;
    align-items: flex-start;

    gap: 13px;

    border:
        1px solid rgba(178,151,88,.29);

    background:
        rgba(19,23,43,.74);

    backdrop-filter:
        blur(3px);

    transition:
        transform .26s ease,
        background .26s ease,
        border-color .26s ease,
        box-shadow .26s ease;
}

.feature-card::before {
    content: "";

    position: absolute;

    inset: 6px;

    border:
        1px solid rgba(178,151,88,.065);

    pointer-events: none;

    transition:
        inset .26s ease,
        border-color .26s ease;
}

.feature-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            var(--gold),
            transparent
        );

    transform:
        scaleX(.25);

    opacity: 0;

    transition:
        transform .26s ease,
        opacity .26s ease;
}

.feature-card:hover {
    transform:
        translateY(-3px);

    background:
        rgba(27,31,53,.84);

    border-color:
        rgba(178,151,88,.56);

    box-shadow:
        0 9px 20px
        rgba(0,0,0,.18);
}

.feature-card:hover::before {
    inset: 4px;

    border-color:
        rgba(178,151,88,.14);
}

.feature-card:hover::after {
    opacity: 1;

    transform:
        scaleX(1);
}

.feature-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    border:
        1px solid rgba(178,151,88,.61);

    border-radius: 50%;

    color: var(--gold);
}

.feature-icon svg {
    width: 20px;
    height: 20px;

    fill: currentColor;
}

.feature-text {
    min-width: 0;
}

.feature-text h3 {
    margin:
        2px 0 4px;

    color: var(--gold);

    font-family:
        "Cinzel",
        serif;

    font-size: 13px;

    line-height: 1;

    font-weight: 500;

    text-transform: uppercase;
}

.feature-line {
    width: 27px;
    height: 1px;

    margin-bottom: 8px;

    background: var(--gold);
}

.feature-text p {
    margin: 0;

    color: #DDD6C7;

    font-size: 10.5px;

    line-height: 1.58;
}


/* =========================================================
   SEARCH FEEDBACK
========================================================= */

.search-feedback {
    position: fixed;

    top: 16px;
    right: 16px;

    z-index: 2000;

    padding:
        10px 13px;

    color: var(--cream);

    background: #161A2C;

    border:
        1px solid rgba(178,151,88,.38);

    font-size: 9px;

    opacity: 0;

    transform:
        translateY(-8px);

    pointer-events: none;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.search-feedback.show {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   ANIMAÇÃO
========================================================= */


/* =========================================================
   DESKTOP MÉDIO
========================================================= */

@media (max-width: 1500px) {
.hero-content {
        width:
            min(
                1100px,
                calc(100% - 56px)
            );
    }

    .hero-title {
        font-size: 58px;
    }

    .hero-description {
        font-size: 13px;
    }

    .lore-summary p {
        font-size: 11.3px;
    }

    .feature-card {
        min-height: 108px;
    }

    .feature-text p {
        font-size: 9.5px;
    }
}


/* =========================================================
   NOTEBOOK
========================================================= */

@media (max-width: 1250px) {
.hero-content {
        width:
            calc(100% - 44px);
    }

    .hero-title {
        font-size: 48px;
    }

    .hero-description {
        font-size: 11.5px;
    }

    .lore-summary p {
        font-size: 10px;
    }

    .feature-card {
        min-height: 94px;
    }

    .feature-text h3 {
        font-size: 11px;
    }

    .feature-text p {
        font-size: 8.5px;
    }
}


/* =========================================================
   NOTEBOOK PEQUENO
========================================================= */

@media (max-width: 1000px) {
.hero-content {
        width:
            calc(100% - 38px);

        padding:
            32px 0 40px;
    }

    .hero-title {
        font-size: 40px;
    }

    .hero-description {
        font-size: 10.5px;
    }

    .lore-summary p {
        font-size: 9px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 780px) {
.hero-content {
        width:
            calc(100% - 30px);
    }

    .hero-title {
        font-size: 35px;
    }

    .hero-description {
        font-size: 10px;
    }

    .lore-summary p {
        font-size: 8.5px;

        text-align: left;
    }

    .feature-grid {
        grid-template-columns: 1fr;

        width:
            min(
                100%,
                560px
            );
    }

    .feature-card {
        min-height: 74px;

        align-items: center;
    }

    .feature-text h3 {
        font-size: 10px;
    }

    .feature-text p {
        font-size: 8px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {


    

    

    

    

    

    

    

    

    

    

    

    .hero-content {
        width:
            calc(100% - 28px);

        padding:
            26px 0 32px;
    }

    .hero-title {
        font-size:
            clamp(
                28px,
                8vw,
                33px
            );
    }

    .hero-description {
        font-size: 9.5px;
    }

    .lore-summary {
        margin-top: 24px;

        padding-top: 17px;
    }

    .lore-summary p {
        font-size: 8.2px;
    }

    .hero-story-button {
        min-width: 180px;

        height: 40px;
    }
}


/* =========================================================
   MOBILE PEQUENO
========================================================= */

@media (max-width: 430px) {
.hero-title {
        font-size: 28px;
    }

    .lore-summary p {
        font-size: 8px;
    }
}


/* =========================================================
   TELAS MUITO BAIXAS
========================================================= */

@media (min-width: 1001px) and (max-height: 720px) {
.hero-content {
        padding:
            30px 0 36px;
    }

    .hero-title {
        font-size: 48px;
    }

    .hero-description {
        font-size: 11px;
    }

    .lore-summary {
        margin-top: 23px;
    }

    .lore-summary p {
        font-size: 9.5px;
    }

    .feature-card {
        min-height: 86px;
    }
}


/* =========================================================
   FULL HD — 1920 × 1080
   COLOCADO POR ÚLTIMO DE PROPÓSITO.

   Isso garante que esta configuração vença as regras
   anteriores quando o navegador estiver em Full HD.
========================================================= */

@media (min-width: 1600px)
and (min-height: 900px)
and (max-height: 1200px) {
/* sidebar */

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    


    /* header */

    

    

    

    

    

    

    

    

    


    /* área central */

    .hero-content {
        width:
            min(
                1280px,
                calc(100% - 90px)
            ) !important;

        padding:
            62px 0 78px !important;
    }

    .hero-intro {
        width:
            min(
                100%,
                760px
            ) !important;
    }

    .eyebrow {
        margin-bottom:
            13px !important;

        font-size:
            10px !important;
    }

    .eyebrow::before,
    .eyebrow::after {
        width:
            34px !important;
    }

    .hero-title {
        font-size:
            76px !important;

        line-height:
            .95 !important;
    }

    .title-divider {
        width:
            320px !important;

        max-width:
            70% !important;

        height:
            30px !important;

        margin:
            18px 0 !important;
    }

    .title-divider::after {
        width:
            9px !important;

        height:
            9px !important;
    }

    .hero-description {
        max-width:
            720px !important;

        font-size:
            15.5px !important;

        line-height:
            1.8 !important;
    }


    /* lore */

    .lore-summary {
        width:
            min(
                100%,
                1180px
            ) !important;

        margin-top:
            48px !important;

        padding-top:
            30px !important;
    }

    .lore-heading {
        gap:
            15px !important;

        margin-bottom:
            13px !important;
    }

    .lore-kicker {
        font-size:
            11px !important;
    }

    .lore-line {
        width:
            62px !important;
    }

    .lore-summary p {
        font-size:
            13.5px !important;

        line-height:
            1.9 !important;
    }


    /* botão */

    .history-action {
        margin-top:
            32px !important;
    }

    .hero-story-button {
        min-width:
            250px !important;

        height:
            54px !important;

        padding:
            0 22px !important;

        font-size:
            11px !important;
    }


    /* cards */

    .feature-grid {
        width:
            min(
                100%,
                1180px
            ) !important;

        margin-top:
            36px !important;

        gap:
            16px !important;
    }

    .feature-card {
        min-height:
            132px !important;

        padding:
            18px !important;

        gap:
            15px !important;
    }

    .feature-card::before {
        inset:
            7px !important;
    }

    .feature-icon {
        width:
            50px !important;

        height:
            50px !important;

        flex-basis:
            50px !important;
    }

    .feature-icon svg {
        width:
            22px !important;

        height:
            22px !important;
    }

    .feature-text h3 {
        margin:
            2px 0 5px !important;

        font-size:
            14px !important;
    }

    .feature-line {
        width:
            30px !important;

        margin-bottom:
            9px !important;
    }

    .feature-text p {
        font-size:
            11.3px !important;

        line-height:
            1.62 !important;
    }


    /* fade */

    .hero::after {
        height:
            155px !important;
    }
}