/* ===========================================================
   JOKER MU
   STYLE.CSS
=========================================================== */

:root{

    --bg:#0a0712;
    --panel:#140f1f;
    --panel2:#1b1428;

    --gold:#c9a468;
    --gold-light:#f2d999;

    --purple:#6b3fa0;

    --text:#d8d4df;
    --muted:#8d8496;

    --facebook:#1877f2;
    --discord:#5865f2;
    --qq:#12b7f5;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:var(--bg);

    color:var(--text);

    font-family:"Noto Sans SC",sans-serif;

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

.container{

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:0 20px;

}

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

.site-header{

    position:sticky;

    top:0;

    z-index:999;

    backdrop-filter:blur(16px);

    background:rgba(10,7,18,.92);

    border-bottom:1px solid rgba(201,164,104,.15);

}

.header-inner{

    height:84px;

    display:flex;

    align-items:center;

}

.logo-area{

    flex:none;

}

.logo{

    display:block;

    height:60px;

    width:auto;

    object-fit:contain;

}

.header-buttons{

    margin-left:auto;

    display:flex;

    align-items:center;

    gap:14px;

}


/* ===========================================================
BUTTON
=========================================================== */

.social-btn{

    height:42px;

    padding:0 18px;

    display:flex;

    align-items:center;

    gap:8px;

    border-radius:8px;

    transition:.3s;

    font-size:14px;

    font-weight:600;

    border:1px solid rgba(255,255,255,.15);

}

.social-btn:hover{

    transform:translateY(-2px);

}

.facebook{

    color:var(--facebook);

    border-color:rgba(24,119,242,.35);

}

.facebook:hover{

    background:rgba(24,119,242,.12);

}

.discord{

    color:var(--discord);

    border-color:rgba(88,101,242,.35);

}

.discord:hover{

    background:rgba(88,101,242,.12);

}

.qq{

    color:var(--qq);

    border-color:rgba(18,183,245,.35);

}

.qq:hover{

    background:rgba(18,183,245,.12);

}


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

.hero{

    padding:24px 0;

}

.ornate-frame{

    position:relative;

    border:1px solid rgba(201,164,104,.45);

    background:rgba(20,15,31,.75);

}

.hero-image{

    position:relative;

    overflow:hidden;

}

.hero-image img{

    width:100%;

    height:auto;

    display:block;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(20,15,31,.9),
    rgba(20,15,31,.2),
    transparent);

}

.hero-features{

    display:grid;

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

    gap:40px;

    padding:30px;

}

.feature h3{

    color:var(--gold-light);

    font-size:18px;

    margin-bottom:12px;

    font-family:"Cinzel",serif;

}

.feature p{

    color:var(--muted);

    font-size:14px;

    line-height:1.8;

}

.gold-line{

    width:50px;

    height:2px;

    background:var(--gold);

    margin-bottom:16px;

}

.small{

    width:35px;

}


/* 下一部分继续（Cards、Footer、四角装饰、Hover动画、Responsive） */
/* ===========================================================
SECTION DIVIDER
=========================================================== */

.section-divider{

    position:relative;

    width:100%;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.section-divider::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:50%;

    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        rgba(201,164,104,.45),
        transparent
    );

}

.section-divider::after{

    content:"◆";

    position:relative;

    z-index:2;

    padding:0 18px;

    background:var(--bg);

    color:var(--gold);

    font-size:18px;

}


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

.cards-section{

    padding-bottom:60px;

}

.cards-grid{

    display:grid;

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

    gap:28px;

}

.game-card{

    overflow:hidden;

    transition:.35s;

}

.game-card:hover{

    transform:translateY(-8px);

    border-color:var(--gold);

    box-shadow:
    0 0 40px rgba(201,164,104,.12);

}

.card-image{

    overflow:hidden;

}

.card-image img{

    width:100%;

    height:230px;

    object-fit:cover;

    transition:.45s;

}

.game-card:hover img{

    transform:scale(1.06);

}

.card-content{

    padding:24px 24px 30px;

}

.card-content h3{

    font-size:22px;

    color:var(--gold-light);

    font-family:"Cinzel",serif;

    margin-bottom:14px;

}

.card-content p{

    font-size:14px;

    line-height:1.9;

    color:var(--muted);

}


/* ===========================================================
ORNAMENT
=========================================================== */

.corner{

    position:absolute;

    width:28px;

    height:28px;

    border-color:var(--gold);

    opacity:.7;

}

.corner.tl{

    top:10px;

    left:10px;

    border-left:1px solid;

    border-top:1px solid;

}

.corner.tr{

    top:10px;

    right:10px;

    border-right:1px solid;

    border-top:1px solid;

}

.corner.bl{

    left:10px;

    bottom:10px;

    border-left:1px solid;

    border-bottom:1px solid;

}

.corner.br{

    right:10px;

    bottom:10px;

    border-right:1px solid;

    border-bottom:1px solid;

}


/* ===========================================================
FOOTER
=========================================================== */

.site-footer{

    border-top:1px solid rgba(201,164,104,.15);

    background:#09060f;

}

.footer-content{

    padding:28px 0;

    text-align:center;

}

.footer-content p{

    color:var(--muted);

    font-size:14px;

    line-height:2;

}


/* ===========================================================
ANIMATION
=========================================================== */

.hero-image img,
.card-image img{

    will-change:transform;

}

.logo{

    transition:.3s;

}

.logo:hover{

    transform:scale(1.03);

}

.social-btn{

    transition:
        .3s transform,
        .3s background,
        .3s border-color;

}


/* ===========================================================
RESPONSIVE
=========================================================== */

@media (max-width:1024px){

    .hero-features{

        grid-template-columns:1fr;

        gap:24px;

    }

    .cards-grid{

        grid-template-columns:1fr 1fr;

    }

}

@media (max-width:768px){

    .desktop-only{

        display:none;

    }

    .header-inner{

        flex-direction:column;

        height:auto;

        padding:18px 0;

        gap:18px;

    }

    .header-buttons{

        margin-left:0;

        flex-wrap:wrap;

        justify-content:center;

    }

    .hero-image img{

        height:320px;

    }

    .cards-grid{

        grid-template-columns:1fr;

    }

    .card-image img{

        height:220px;

    }

    .feature h3{

        font-size:16px;

    }

    .card-content h3{

        font-size:20px;

    }

}

@media (max-width:480px){

    .container{

        padding:0 14px;

    }

    .logo{

        height:50px;

    }

    .social-btn{

        width:100%;

        justify-content:center;

    }

    .hero-features{

        padding:20px;

    }

}

/* ================= CARD BUTTON ================= */

.card-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    margin-top:22px;

    width:100%;

    height:46px;

    border:1px solid rgba(201,164,104,.65);

    background:linear-gradient(
        180deg,
        rgba(201,164,104,.18),
        rgba(201,164,104,.05)
    );

    color:var(--gold-light);

    border-radius:6px;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    transition:.25s;

}

.card-btn i{

    transition:.25s;

}

.card-btn:hover{

    color:#fff;

    border-color:var(--gold);

    background:linear-gradient(
        180deg,
        rgba(201,164,104,.45),
        rgba(201,164,104,.18)
    );

    box-shadow:
        0 0 18px rgba(201,164,104,.25);

}

.card-btn:hover i{

    transform:translateX(4px);

}