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

body{
    font-family:'Outfit',sans-serif;
    background:#05050a;
    color:white;
    overflow-x:hidden;
}

.background-glow{
    position:fixed;
    inset:0;
    z-index:-1;

    background:
    radial-gradient(circle at top left,
    rgba(168,85,247,.25),
    transparent 40%),

    radial-gradient(circle at bottom right,
    rgba(236,72,153,.2),
    transparent 40%);
}

.hero{
    text-align:center;
    padding:80px 20px;
}

.logo{
    width:160px;
    height:160px;
    object-fit:cover;

    border-radius:50%;

    border:4px solid #a855f7;

    padding:5px;

    background:#0d0d16;

    box-shadow:
        0 0 15px #a855f7,
        0 0 30px #a855f7,
        0 0 50px #ec4899;

    transition:.4s ease;
}

.logo:hover{
    transform:scale(1.05);

    box-shadow:
        0 0 20px #a855f7,
        0 0 40px #a855f7,
        0 0 70px #ec4899,
        0 0 100px #ec4899;
}

.hero h1{
    font-size:3rem;
    color:#fff;

    text-shadow:
    0 0 10px #a855f7,
    0 0 25px #a855f7;
}

.subtitle{
    color:#cfcfe9;
    margin-top:15px;
}

.rules{
    max-width:1000px;
    margin:auto;
    padding:40px 20px;
}

.rules h2{
    margin-bottom:30px;
}

.rule-card{
    background:#0d0d16;

    border:1px solid rgba(168,85,247,.3);

    border-radius:18px;

    padding:25px;

    margin-bottom:20px;

    transition:.3s;

    box-shadow:
    0 0 20px rgba(168,85,247,.1);
}

.rule-card:hover{
    transform:translateY(-5px);

    box-shadow:
    0 0 20px #a855f7,
    0 0 40px #ec4899;
}

.rule-card h3{
    margin-bottom:10px;
}

.discord-embed{
    max-width:1000px;
    margin:50px auto;
    padding:20px;
}

.embed-content{
    background:#2b2d31;
    border-radius:12px;
    padding:25px;
    position:relative;
}

.embed-bar{
    width:5px;
    height:180px;
    background:#a855f7;
    position:absolute;
}

.discord-btn{
    display:inline-block;
    margin-top:20px;

    text-decoration:none;

    color:white;

    padding:14px 28px;

    border-radius:12px;

    background:
    linear-gradient(
        90deg,
        #a855f7,
        #ec4899
    );

    transition:.3s;
}

.discord-btn:hover{
    transform:translateY(-3px);

    box-shadow:
    0 0 20px #a855f7,
    0 0 40px #ec4899;
}
.social-buttons{

    position:fixed;

    right:25px;
    bottom:25px;

    display:flex;
    flex-direction:column;

    gap:15px;

    z-index:9999;
}

.social-btn{

    width:65px;
    height:65px;

    border-radius:50%;

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

    background:#111118;

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

    transition:.3s;

    overflow:hidden;
}

.social-btn img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50%;
}

.twitch{

    box-shadow:
        0 0 15px rgba(168,85,247,.4);
}

.twitch:hover{

    transform:translateY(-4px) scale(1.08);

    box-shadow:
        0 0 20px #a855f7,
        0 0 40px #a855f7,
        0 0 60px #ec4899;
}

.youtube{

    box-shadow:
        0 0 15px rgba(236,72,153,.4);
}

.youtube:hover{

    transform:translateY(-4px) scale(1.08);

    box-shadow:
        0 0 20px #ec4899,
        0 0 40px #ec4899,
        0 0 60px #a855f7;
}
.ticket-rules{

    max-width:1000px;
    margin:60px auto;

    padding:30px;

    background:#0d0d16;

    border-radius:20px;

    border:1px solid rgba(168,85,247,.2);

    box-shadow:
        0 0 25px rgba(168,85,247,.1);
}

.ticket-rules h2{

    margin-bottom:10px;
}

.ticket-subtitle{

    color:#b8b8d0;

    margin-bottom:20px;
}

#ticketRuleSelect{

    width:100%;

    padding:16px;

    background:#151520;

    color:white;

    border:none;

    border-radius:12px;

    outline:none;

    cursor:pointer;

    font-size:16px;
}

.rule-display{

    margin-top:20px;

    padding:25px;

    background:#111118;

    border-left:4px solid #a855f7;

    border-radius:15px;

    min-height:120px;

    white-space:pre-line;

    line-height:1.8;

    color:#d8d8e8;
}
.menu-btn{

    position:fixed;

    top:20px;
    left:20px;

    width:55px;
    height:55px;

    border:none;

    border-radius:15px;

    background:#111118;

    color:white;

    font-size:28px;

    cursor:pointer;

    z-index:9999;

    box-shadow:
        0 0 15px rgba(168,85,247,.3);

    transition:.3s;
}

.menu-btn:hover{

    box-shadow:
        0 0 20px #a855f7,
        0 0 40px #ec4899;
}

.sidebar{

    position:fixed;

    top:0;
    left:-300px;

    width:280px;
    height:100vh;

    background:#0b0b14;

    border-right:1px solid rgba(168,85,247,.2);

    transition:.4s;

    z-index:9998;
}

.sidebar.active{

    left:0;
}

.sidebar-header{

    text-align:center;

    padding:30px 20px;

    border-bottom:1px solid rgba(255,255,255,.08);
}

.sidebar-header img{

    width:90px;
    height:90px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #a855f7;

    margin-bottom:15px;
}

.sidebar-header h3{

    color:white;
}

.sidebar a{

    display:block;

    padding:18px 25px;

    color:white;

    text-decoration:none;

    transition:.3s;
}

.sidebar a:hover{

    background:rgba(168,85,247,.15);

    padding-left:35px;
}
main,
.hero{

    transition: .4s ease;
}

body.menu-open main,
body.menu-open .hero{

    margin-left:280px;
}
#overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.5);

    backdrop-filter:blur(4px);

    opacity:0;

    pointer-events:none;

    transition:.3s;

    z-index:9997;
}

#overlay.active{

    opacity:1;

    pointer-events:auto;
}
/* ========================= */
/* TICKETS EMBED PROFESIONAL */
/* ========================= */

.ticket-embed{

    max-width:1100px;

    margin:60px auto;

    background:rgba(12,12,20,.85);

    backdrop-filter:blur(15px);

    border:1px solid rgba(168,85,247,.25);

    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 0 25px rgba(168,85,247,.15),
        0 0 50px rgba(236,72,153,.08);
}

.ticket-header{

    display:flex;

    align-items:center;

    gap:20px;

    padding:25px;

    background:
    linear-gradient(
        90deg,
        rgba(168,85,247,.15),
        rgba(236,72,153,.15)
    );
}

.ticket-header-icon{

    width:70px;
    height:70px;

    display:flex;

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

    font-size:35px;

    border-radius:50%;

    background:#111118;

    box-shadow:
        0 0 15px #a855f7;
}

.ticket-header h2{

    color:white;

    margin:0;
}

.ticket-header p{

    color:#cfcfe9;

    margin-top:5px;
}

.ticket-rule{

    padding:25px;

    border-top:1px solid rgba(255,255,255,.05);

    transition:.3s;
}

.ticket-rule:hover{

    background:rgba(168,85,247,.05);
}

.ticket-rule h3{

    margin-bottom:10px;
}

.ticket-rule p{

    color:#d5d5e8;

    line-height:1.8;
}

/* ========================= */
/* OVERLAY MENU */
/* ========================= */

#overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.5);

    backdrop-filter:blur(4px);

    opacity:0;

    pointer-events:none;

    transition:.3s;

    z-index:9997;
}

#overlay.active{

    opacity:1;

    pointer-events:auto;
}

/* ========================= */
/* MOVER CONTENIDO */
/* ========================= */

.hero,
main{

    transition:.4s ease;
}

body.menu-open .hero,
body.menu-open main{

    margin-left:280px;
}

/* ========================= */
/* SCROLL SUAVE */
/* ========================= */

html{

    scroll-behavior:smooth;
}

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

@media(max-width:768px){

    body.menu-open .hero,
    body.menu-open main{

        margin-left:0;
    }

    .sidebar{

        width:260px;
    }

    .ticket-header{

        flex-direction:column;

        text-align:center;
    }
}