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

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


/* =========================
   BASE
========================= */

body {

    background:
    radial-gradient(
        ellipse at top,
        #243957 0%,
        #0b0f14 45%,
        #05070a 100%
    );

    background-attachment:fixed;

    color:#e6edf3;

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    min-height:100vh;
}


.container {

    width:90%;

    max-width:1200px;

    margin:auto;

}



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

.logo {

    display:flex;

    justify-content:center;

    margin-top:40px;

    margin-bottom:30px;

}


.logo img {

    width:300px;

    height:auto;

}



/* =========================
   NAVIGATION
========================= */

.navbar {

    display:flex;

    justify-content:center;

    margin-bottom:45px;

}


.nav-links {

    list-style:none;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;


    background:#192841;

    border:2px solid #ff8c00;

    border-radius:20px;

    padding:18px 25px;


    box-shadow:
    0 0 20px rgba(255,140,0,.35);

}


.nav-links a {

    display:block;

    color:#ffffff;

    text-decoration:none;

    padding:12px 18px;

    border-radius:10px;

    font-size:17px;

    transition:.25s;

}


.nav-links a:hover {

    background:rgba(255,140,0,.25);

    color:#ffd27f;

}



/* Basil */

.nav-links a[href="tribute.html"] {

    color:#9bbf8a;

}



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

.menu-toggle {

    display:none;

    background:#192841;

    color:#ff8c00;

    border:2px solid #ff8c00;

    border-radius:10px;

    padding:8px 15px;

    font-size:24px;

}



/* =========================
   STANDARD PAGE STYLE
   ABOUT / BASIL / HOME
========================= */


.page-content,
.home-content {

    max-width:1100px;

    margin:50px auto;

}



.page-content h1,
.home-content h1 {

    text-align:center;

    color:#ffb347;

    font-size:38px;

    margin-bottom:10px;

}



.subtitle {

    text-align:center;

    color:#9bbf8a;

    font-size:20px;

    font-style:italic;

    margin-bottom:40px;

}



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

.content-card,
.home-card {


    background:
    rgba(16,27,45,.90);


    border:

    1px solid rgba(255,140,0,.35);


    border-radius:18px;


    padding:35px;


    margin-bottom:25px;


    box-shadow:

    0 0 20px rgba(0,0,0,.35);

}



.content-card h2,
.home-card h2 {

    color:#ff8c00;

    font-size:26px;

    margin-bottom:20px;

}



.content-card p,
.home-card p {

    font-size:18px;

    line-height:1.8;

    margin-bottom:20px;

}



.content-card p:last-child,
.home-card p:last-child {

    margin-bottom:0;

}



/* =========================
   LISTS
========================= */

.content-card ul,
.home-card ul {

    margin-top:20px;

    padding-left:25px;

}


.content-card li,
.home-card li {

    margin-bottom:14px;

    line-height:1.6;

}



/* =========================
   LINKS
========================= */

.content-card a,
.home-card a {

    color:#ffd27f;

    text-decoration:none;

    font-weight:600;

}



.content-card a:hover,
.home-card a:hover {

    color:white;

}



/* =========================
   QUICK LINKS
========================= */

.quick-link {

    display:inline-block;

    background:#192841;

    border:1px solid #ff8c00;

    border-radius:10px;

    padding:10px 16px;

}



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

.join-community {

    text-align:center;

}



.discord-button {

    display:inline-block;

    margin-top:20px;

    padding:16px 30px;


    background:#5865F2;

    color:white !important;


    border-radius:14px;


    font-weight:bold;

    text-decoration:none;


    box-shadow:

    0 0 15px rgba(88,101,242,.45);

}


.discord-button:hover {

    background:#7289da;

}



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

footer {

    margin-top:50px;

    padding:25px 0;

    text-align:center;

    color:#9aa7b5;

}



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

@media(max-width:768px){


.logo img {

    width:180px;

}



.menu-toggle {

    display:block;

    margin:auto;

    margin-bottom:15px;

}



.navbar {

    flex-direction:column;

}



.nav-links {

    display:none;

    width:100%;

    flex-direction:column;

}



.nav-links.active {

    display:flex;

}



.nav-links a {

    text-align:center;

    width:100%;

}



.page-content,
.home-content {

    width:95%;

    margin:30px auto;

}



.content-card,
.home-card {

    padding:20px;

}



.page-content h1,
.home-content h1 {

    font-size:30px;

}



.content-card h2,
.home-card h2 {

    font-size:22px;

}



.content-card p,
.home-card p {

    font-size:16px;

}

}
/* =========================
   BASIL TRIBUTE PAGE
========================= */

.tribute-content {

    max-width:900px;

    margin:50px auto;

    padding:40px;

    background:
    rgba(16,27,45,.95);

    border:1px solid rgba(155,191,138,.45);

    border-radius:18px;

    box-shadow:
    0 0 25px rgba(0,0,0,.45);

}


.tribute-content h1 {

    text-align:center;

    color:#9bbf8a;

    font-size:38px;

    margin-bottom:20px;

}


.tribute-content p:first-of-type {

    text-align:center;

    color:#d9edcc;

    font-style:italic;

    font-size:20px;

    margin-bottom:35px;

}


.tribute-content p {

    color:#e6edf3;

    font-size:18px;

    line-height:1.8;

    margin-bottom:22px;

}


.tribute-content p:last-child {

    text-align:center;

    color:#d9edcc;

    font-weight:bold;

    margin-top:35px;

}


/* Basil mobile */

@media(max-width:768px){

    .tribute-content {

        width:95%;

        padding:22px;

    }


    .tribute-content h1 {

        font-size:30px;

    }


    .tribute-content p {

        font-size:16px;

        line-height:1.6;

    }

}
/* =========================
   SUB NAVIGATION
   How To Play / Tournaments
========================= */

.sub-navbar {

    display:flex;

    justify-content:center;

    margin-bottom:35px;

}


.sub-nav-links {

    list-style:none;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:12px;

    padding:15px 22px;

    background:#192841;

    border:2px solid #ff8c00;

    border-radius:18px;

    box-shadow:
        0 0 20px rgba(255,140,0,.35);

}


.sub-nav-links a {

    display:block;

    color:#ffd27f;

    text-decoration:none;

    background:#101b2d;

    border:1px solid rgba(255,140,0,.35);

    border-radius:10px;

    padding:10px 16px;

    transition:.25s ease;

}


.sub-nav-links a:hover {

    background:rgba(255,140,0,.25);

    color:white;

}


/* Mobile Sub Navigation */

@media(max-width:768px){

    .sub-nav-links {

        width:100%;

        flex-direction:column;

    }


    .sub-nav-links a {

        text-align:center;

    }

}
.news-entry {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}


.news-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}


.news-entry h2 {
    margin-top: 0;
}
.deck-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 25px;
}

.deck-image {
    max-width: 100%;
    height: auto;
    cursor: pointer;
}


.image-modal {

display: none;

position: fixed;

z-index: 1000;

left: 0;

top: 0;

width: 100%;

height: 100%;

background: rgba(0,0,0,0.85);

justify-content: center;

align-items: center;

padding: 20px;

}


.expanded-image {

max-width: 95%;

max-height: 95%;

object-fit: contain;

}