/*==================================================

TSR LTD WEBSITE
STYLE.CSS VERSION 3.0

Refactored around existing HTML structure

==================================================*/


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


*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    min-height:100vh;

    background:#0f1115;

    color:#f5f5f5;

    font-family:'Poppins',sans-serif;

    line-height:1.7;

    overflow-x:hidden;

}



img{

    max-width:100%;

    display:block;

}



a{

    text-decoration:none;

    color:inherit;

}



ul{

    list-style:none;

}



button,
input,
textarea{

    font-family:'Poppins',sans-serif;

}



hr{

    border:none;

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

}





/*==================================================
VARIABLES
==================================================*/


:root{


    --gold:#C8A44D;

    --gold-light:#E8C66B;

    --gold-dark:#A8842D;


    --bg:#0F1115;

    --surface:#171A20;

    --surface-dark:#0A0C10;


    --white:#ffffff;

    --grey:#BBBBBB;


    --border:rgba(255,255,255,.1);


    --radius:15px;


    --shadow:

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


    --transition:.35s ease;


}





/*==================================================
GLOBAL LAYOUT
==================================================*/


section{

    padding:100px 8%;

}



.container{

    width:min(1300px,100%);

    margin:auto;

}



.position-relative{

    position:relative;

}






/*==================================================
TYPOGRAPHY
==================================================*/


h1,
h2,
h3,
h4{

    font-family:'Cinzel',serif;

    font-weight:700;

    line-height:1.2;

}



h1{

    font-size:4.5rem;

}



h2{

    font-size:3rem;

}



h3{

    font-size:1.6rem;

}



h4{

    font-size:1.2rem;

}



p{

    color:var(--grey);

    margin-top:20px;

}



.section-heading{

    text-align:center;

    margin-bottom:70px;

}



.section-heading span{

    display:block;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:.85rem;

    font-weight:600;

}



.section-heading h2{

    margin-top:15px;

}



.section-heading p{

    max-width:760px;

    margin:25px auto 0;

}







/*==================================================
BUTTONS
==================================================*/


.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:15px 35px;


    border-radius:50px;


    font-weight:600;


    letter-spacing:.5px;


    transition:var(--transition);


}



.btn-primary{

    background:var(--gold);

    color:#111;

}



.btn-primary:hover{

    background:var(--gold-light);

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}



.btn-secondary{

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

    color:white;

}



.btn-secondary:hover{

    background:var(--gold);

    color:#111;

    transform:translateY(-3px);

}





/*==================================================
ACCESSIBILITY
==================================================*/


a:focus,
button:focus{

    outline:2px solid var(--gold);

    outline-offset:4px;

}
/*==================================================
NAVBAR
==================================================*/


.navbar{

    width:100%;

    min-height:80px;

    padding:10px 8%;

    position:absolute;

    top:0;

    left:0;

    z-index:1000;


    display:flex;

    justify-content:space-between;

    align-items:center;


    background:rgba(10,10,10,.45);

    backdrop-filter:blur(10px);

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

}



.logo img{

    width:80px;

    height:80px;

    object-fit:contain;

}



.nav-links{

    display:flex;

    align-items:center;

    gap:40px;

}



.nav-links a{

    color:white;

    font-weight:500;

    position:relative;

    transition:var(--transition);

}



.nav-links a:hover{

    color:var(--gold);

}



.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:var(--transition);

}



.nav-links a:hover::after{

    width:100%;

}





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


.mobile-menu{

    display:none;

    background:none;

    border:none;

    color:white;

    font-size:1.6rem;

    cursor:pointer;

}







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


.hero{

    position:relative;

    min-height:100vh;


    background:

    linear-gradient(

    rgba(10,10,10,.75),

    rgba(10,10,10,.80)

    ),

    url("../images/hero.jpg");


    background-size:cover;

    background-position:center;


    display:flex;

    flex-direction:column;

}



.hero-overlay{

    position:absolute;

    inset:0;

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

}






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


.hero-content{

    flex:1;


    position:relative;

    z-index:2;


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    text-align:center;


    max-width:900px;


    margin:auto;


    padding:110px 20px 0;

}



.hero-tag{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:5px;


    margin-bottom:20px;


    font-size:.9rem;

}



.hero-content h1{

    margin-bottom:30px;

}



.hero-content p{

    max-width:760px;


    color:#ddd;


    font-size:1.15rem;

}



.hero-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;


    gap:25px;


    margin-top:50px;

}
/*==================================================
FEATURED GAMES
==================================================*/


.featured-games{

    background:var(--bg);

}



.game-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:40px;

}



.game-card{

    background:var(--surface);

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

    border-radius:var(--radius);

    overflow:hidden;


    box-shadow:var(--shadow);


    transition:var(--transition);


    position:relative;

}



.game-card:hover{

    transform:translateY(-12px);

    border-color:var(--gold);

}



.game-card img{

    width:100%;

    height:280px;

    object-fit:cover;


    transition:.5s ease;

}



.game-card:hover img{

    transform:scale(1.05);

}



.game-content{

    padding:35px;

}



.game-content h3{

    color:var(--gold);

    margin-bottom:20px;

}



.game-content p{

    margin-bottom:30px;

}



.game-button{

    color:var(--gold);

    font-weight:600;


    display:inline-flex;

    align-items:center;


    transition:var(--transition);

}



.game-button:hover{

    letter-spacing:1px;

}







/*==================================================
COMMON CARD EFFECT
==================================================*/


.game-card::before,
.feature-card::before{

    content:"";


    position:absolute;


    top:0;

    left:-100%;


    width:100%;

    height:3px;


    background:

    linear-gradient(

    90deg,

    transparent,

    var(--gold),

    transparent

    );


    transition:.7s ease;

}



.game-card:hover::before,
.feature-card:hover::before{

    left:100%;

}







/*==================================================
WHY TSR
==================================================*/


.why-tsr{

    background:var(--surface-dark);

}



.features-grid{

    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(250px,1fr));


    gap:35px;

}



.feature-card{

    position:relative;


    background:var(--surface);


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


    border-radius:var(--radius);


    padding:45px 35px;


    text-align:center;


    overflow:hidden;


    transition:var(--transition);

}



.feature-card:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

    box-shadow:var(--shadow);

}



.feature-card i{

    font-size:3rem;


    color:var(--gold);


    margin-bottom:25px;

}



.feature-card h3{

    margin-bottom:20px;

}



.feature-card p{

    line-height:1.8;

}
/*==================================================
COMPANY OVERVIEW
==================================================*/


.company-overview{

    background:var(--bg);

}



.company-grid{

    display:grid;

    grid-template-columns:1fr 1fr;


    gap:70px;


    align-items:center;

}



.company-text p{

    margin-bottom:20px;

    line-height:1.8;

}



.company-text .btn{

    margin-top:25px;

}



.company-image{

    overflow:hidden;


    border-radius:var(--radius);


    box-shadow:var(--shadow);

}



.company-image img{

    width:100%;


    height:500px;


    object-fit:cover;


    transition:.6s ease;

}



.company-image:hover img{

    transform:scale(1.08);

}







/*==================================================
CREATOR RESOURCES
==================================================*/


.creator-resources{

    background:var(--surface-dark);

}



.resource-grid{

    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));


    gap:35px;

}



.resource-card{

    position:relative;


    overflow:hidden;


    background:var(--surface);


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


    border-radius:var(--radius);


    padding:45px;


    transition:var(--transition);

}



.resource-card:hover{

    transform:translateY(-10px);


    border-color:var(--gold);


    box-shadow:var(--shadow);

}



.resource-card i{

    font-size:2.8rem;


    color:var(--gold);


    margin-bottom:25px;

}



.resource-card h3{

    margin-bottom:20px;

}



.resource-card a{

    display:inline-block;


    margin-top:30px;


    color:var(--gold);


    font-weight:600;


    transition:var(--transition);

}



.resource-card a:hover{

    letter-spacing:.5px;

}








/*==================================================
LATEST NEWS
==================================================*/


.latest-news{

    background:var(--bg);

}



.news-grid{

    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(300px,1fr));


    gap:35px;

}



.news-card{

    background:var(--surface);


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


    border-radius:var(--radius);


    padding:40px;


    position:relative;


    overflow:hidden;


    transition:var(--transition);

}



.news-card:hover{

    transform:translateY(-10px);


    border-color:var(--gold);


    box-shadow:var(--shadow);

}



.news-date{

    display:inline-block;


    background:var(--gold);


    color:#111;


    padding:8px 16px;


    border-radius:50px;


    font-size:.75rem;


    font-weight:700;


    text-transform:uppercase;


    margin-bottom:25px;

}



.news-card h3{

    margin-bottom:20px;

}



.news-card a{

    display:inline-block;


    margin-top:25px;


    color:var(--gold);


    font-weight:600;

}
/*==================================================
COMMUNITY SECTION
==================================================*/


.community{

    background:var(--surface-dark);

}



.community-grid{

    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));


    gap:30px;

}



.community-card{

    background:var(--surface);


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


    border-radius:var(--radius);


    padding:40px 25px;


    text-align:center;


    transition:var(--transition);


}



.community-card:hover{

    transform:translateY(-10px);


    border-color:var(--gold);


    box-shadow:var(--shadow);

}



.community-card i{

    font-size:3rem;


    color:var(--gold);


    margin-bottom:20px;

}



.community-card h3{

    margin-bottom:15px;

}



.community-card p{

    line-height:1.7;

}







/*==================================================
CALL TO ACTION
==================================================*/


.cta{

    background:


    linear-gradient(

    rgba(0,0,0,.75),

    rgba(0,0,0,.75)

    ),


    url("../images/cta-background.jpg");



    background-size:cover;


    background-position:center;



    text-align:center;

}



.cta h2{

    color:var(--white);

}



.cta p{

    max-width:700px;


    margin:25px auto;


    font-size:1.1rem;

}



.cta-buttons{

    display:flex;


    justify-content:center;


    gap:25px;


    flex-wrap:wrap;


    margin-top:40px;

}







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


footer{

    background:#08090c;


    padding:80px 8% 30px;


}



.footer-grid{

    display:grid;


    grid-template-columns:

    1.5fr repeat(3,1fr);


    gap:50px;

}



.footer-column h3{

    color:var(--gold);


    margin-bottom:25px;

}



.footer-column h4{

    color:var(--gold);


    margin-bottom:25px;


    text-transform:uppercase;


    letter-spacing:2px;

}



.footer-column p{

    color:var(--grey);

}



.footer-column ul li{

    margin-bottom:12px;

}



.footer-column ul li a{

    color:var(--grey);


    transition:var(--transition);

}



.footer-column ul li a:hover{

    color:var(--gold);


    padding-left:5px;

}





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


.footer-divider{

    margin:45px 0;


    border-color:rgba(255,255,255,.1);

}







/*==================================================
LEGAL / DISCLAIMER
==================================================*/


.footer-legal,
.footer-disclaimer{

    max-width:900px;


    margin:auto;


    text-align:center;

}



.footer-legal h3,
.footer-disclaimer h3{

    color:var(--gold);


    margin-bottom:25px;

}



.footer-legal strong{

    color:white;

}







/*==================================================
SOCIAL ICONS
==================================================*/


.footer-social{

    display:flex;


    justify-content:center;


    gap:25px;


    margin:40px 0;

}



.footer-social a{

    width:50px;


    height:50px;


    display:flex;


    justify-content:center;


    align-items:center;


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


    border-radius:50%;


    transition:var(--transition);

}



.footer-social a:hover{

    background:var(--gold);


    color:#111;


    transform:translateY(-5px);

}



.footer-social i{

    font-size:1.3rem;

}







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


.footer-bottom{

    display:flex;


    justify-content:space-between;


    align-items:center;


    gap:20px;


    flex-wrap:wrap;

}



.footer-bottom p{

    font-size:.85rem;

}



.footer-bottom a{

    color:var(--grey);


    transition:var(--transition);

}



.footer-bottom a:hover{

    color:var(--gold);

}
/*==================================================
ABOUT PAGE
==================================================*/


.about-hero{

    min-height:55vh;


    background:


    linear-gradient(

    rgba(10,10,10,.75),

    rgba(10,10,10,.80)

    ),


    url("../images/about-banner.jpg");


    background-size:cover;


    background-position:center;



    display:flex;


    align-items:center;

}







/*==================================================
PAGE HERO GENERAL CONTENT
==================================================*/


.about-hero .hero-content,
.contact-hero .hero-content,
.games-hero .hero-content,
.careers-hero .hero-content,
.team-hero .hero-content{


    padding-top:120px;

}



.about-hero h1,
.contact-hero h1,
.games-hero h1,
.careers-hero h1,
.team-hero h1{


    font-size:3.8rem;

}







/*==================================================
ABOUT INTRO
==================================================*/


.about-section{

    background:var(--bg);

}



.about-grid{

    display:grid;


    grid-template-columns:1fr 1fr;


    gap:70px;


    align-items:center;

}



.about-text p{

    line-height:1.9;

}



.about-image{

    border-radius:var(--radius);


    overflow:hidden;


    box-shadow:var(--shadow);

}



.about-image img{

    width:100%;


    height:500px;


    object-fit:cover;

}







/*==================================================
ABOUT VALUES
==================================================*/


.values-section{

    background:var(--surface-dark);

}



.values-grid{

    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(260px,1fr));


    gap:35px;

}
/*==================================================
GAMES PAGE
==================================================*/


.games-hero{

    min-height:55vh;


    background:


    linear-gradient(

    rgba(10,10,10,.75),

    rgba(10,10,10,.80)

    ),


    url("../images/games-banner.jpg");


    background-size:cover;


    background-position:center;


    display:flex;


    align-items:center;

}







/*==================================================
GAMES SECTION
==================================================*/


.games-section{

    background:var(--bg);

}



.games-grid{

    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(300px,1fr));


    gap:40px;

}







/*==================================================
GAME SHOWCASE CARD
==================================================*/


.game-showcase{


    background:var(--surface);


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


    border-radius:var(--radius);


    overflow:hidden;


    transition:var(--transition);


    box-shadow:var(--shadow);

}



.game-showcase:hover{


    transform:translateY(-12px);


    border-color:var(--gold);

}



.game-showcase-image{


    height:300px;


    overflow:hidden;

}



.game-showcase-image img{


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.5s ease;

}



.game-showcase:hover img{


    transform:scale(1.08);

}







.game-showcase-content{


    padding:35px;

}



.game-showcase-content h3{


    color:var(--gold);


    margin-bottom:20px;

}



.game-showcase-content p{


    line-height:1.8;

}



.game-showcase-content .btn{


    margin-top:25px;

}







/*==================================================
GAME TAGS
==================================================*/


.game-tag{


    display:inline-block;


    color:#111;


    background:var(--gold);


    padding:7px 15px;


    border-radius:50px;


    font-size:.75rem;


    font-weight:700;


    text-transform:uppercase;


    letter-spacing:1px;


    margin-bottom:20px;

}







/*==================================================
GAME FEATURES
==================================================*/


.game-features{


    background:var(--surface-dark);

}



.game-feature-grid{


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(250px,1fr));


    gap:30px;

}



.game-feature{


    background:var(--surface);


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


    border-radius:var(--radius);


    padding:35px;


    text-align:center;


    transition:var(--transition);

}



.game-feature:hover{


    transform:translateY(-8px);


    border-color:var(--gold);

}



.game-feature i{


    color:var(--gold);


    font-size:2.5rem;


    margin-bottom:20px;

}
/*==================================================
GAME PRODUCT PAGES
==================================================*/


.game-page-hero{

    min-height:65vh;


    display:flex;


    align-items:center;


    background-size:cover;


    background-position:center;


    position:relative;

}



.game-page-hero::before{


    content:"";


    position:absolute;


    inset:0;


    background:

    linear-gradient(

    rgba(0,0,0,.75),

    rgba(0,0,0,.85)

    );


}



.game-page-hero .container{


    position:relative;


    z-index:2;

}







.game-page-hero h1{


    font-size:4rem;


    color:white;

}



.game-page-hero p{


    max-width:750px;


    font-size:1.15rem;


}







/*==================================================
GAME INTRO SECTION
==================================================*/


.game-page-intro{


    background:var(--bg);

}



.game-page-grid{


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:70px;


    align-items:center;

}







.game-page-image{


    border-radius:var(--radius);


    overflow:hidden;


    box-shadow:var(--shadow);

}



.game-page-image img{


    width:100%;


    height:550px;


    object-fit:cover;

}







.game-page-text h2{


    margin-bottom:25px;

}



.game-page-text p{


    line-height:1.9;

}







/*==================================================
GAME MECHANICS / FEATURES
==================================================*/


.game-mechanics{


    background:var(--surface-dark);

}



.mechanics-grid{


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(250px,1fr));


    gap:35px;

}







.mechanic-card{


    background:var(--surface);


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


    border-radius:var(--radius);


    padding:35px;


    text-align:center;


    transition:var(--transition);

}



.mechanic-card:hover{


    transform:translateY(-8px);


    border-color:var(--gold);

}



.mechanic-card i{


    font-size:2.5rem;


    color:var(--gold);


    margin-bottom:20px;

}



.mechanic-card h3{


    margin-bottom:15px;

}







/*==================================================
GAME GALLERY
==================================================*/


.game-gallery{


    background:var(--bg);

}



.gallery-grid{


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));


    gap:30px;

}



.gallery-grid img{


    height:280px;


    width:100%;


    object-fit:cover;


    border-radius:var(--radius);


    transition:var(--transition);

}



.gallery-grid img:hover{


    transform:scale(1.04);

}







/*==================================================
GAME DOWNLOADS
==================================================*/


.game-downloads{


    background:var(--surface-dark);

}



.download-box{


    background:var(--surface);


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


    border-radius:var(--radius);


    padding:40px;


    text-align:center;

}



.download-box h3{


    color:var(--gold);


}


.download-box .btn{


    margin-top:25px;

}
/*==================================================
SHOP PAGE
==================================================*/


.shop-section{

    background:var(--bg);

}





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


.shop-intro{

    max-width:850px;


    margin:0 auto 60px;


    text-align:center;

}



.shop-intro h2{

    margin-bottom:20px;

}



.shop-intro p{

    line-height:1.8;

}







/*==================================================
SHOP GRID
==================================================*/


.shop-grid{


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));


    gap:35px;


}







/*==================================================
SHOP CARD
==================================================*/


.shop-card{


    background:var(--surface);


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


    border-radius:var(--radius);


    overflow:hidden;


    transition:var(--transition);


    box-shadow:var(--shadow);


}



.shop-card:hover{


    transform:translateY(-10px);


    border-color:var(--gold);


}







/*==================================================
PRODUCT IMAGE
==================================================*/


.shop-image{


    height:300px;


    display:flex;


    justify-content:center;


    align-items:center;


    background:#050505;


    padding:30px;


}



.shop-image img{


    height:220px;


    width:auto;


    max-width:220px;


    object-fit:contain;


    transition:.5s ease;


}



.shop-card:hover .shop-image img{


    transform:scale(1.05);


}






/* ================================================= */
/* INDEX FEATURED GAMES - SHOP STYLE                */
/* ================================================= */


.featured-games {
    padding: 90px 0;
}



.featured-store-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}




.featured-game-card {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}




.featured-game-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,.45);
}





/* IMAGE AREA */


.featured-game-card .store-image {
    height: 320px;
    overflow: hidden;
}




.featured-game-card .store-image img {

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .4s ease;

}




.featured-game-card:hover .store-image img {

    transform:scale(1.05);

}





/* CONTENT */


.featured-game-card .store-content {

    padding:30px;

}




.featured-game-card h3 {

    font-family:'Cinzel', serif;
    font-size:1.6rem;
    margin-bottom:15px;
    color:#ffffff;

}




.featured-game-card p {

    color:#cccccc;
    line-height:1.7;
    margin-bottom:25px;

}





/* BUTTON */


.featured-game-card .store-button {

    display:inline-block;
    padding:12px 28px;
    border:1px solid #c89b3c;
    color:#c89b3c;
    text-decoration:none;
    text-transform:uppercase;
    font-size:.85rem;
    letter-spacing:1px;
    transition:.3s ease;

}



.featured-game-card .store-button:hover {

    background:#c89b3c;
    color:#111;

}






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


@media(max-width:992px){


.featured-store-grid {

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

}


}






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


@media(max-width:650px){


.featured-store-grid {

    grid-template-columns:1fr;

}


.featured-game-card .store-image {

    height:260px;

}


}






/*==================================================
PRODUCT CONTENT
==================================================*/


.shop-card-content{


    padding:35px;


    text-align:center;


}



.shop-card-content h3{


    color:var(--gold);


    margin-bottom:15px;


}



.shop-card-content p{


    line-height:1.8;


}



.shop-card-content span{


    display:inline-block;


    margin-top:25px;


    padding:8px 20px;


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


    border-radius:50px;


    color:var(--gold);


    font-weight:600;


}







/*==================================================
PRODUCT BADGE
==================================================*/


.product-status{


    display:inline-block;


    background:var(--gold);


    color:#111;


    padding:6px 15px;


    border-radius:50px;


    font-size:.75rem;


    font-weight:700;


    text-transform:uppercase;


    margin-bottom:20px;


}
/*==================================================
CAREERS PAGE
==================================================*/


.careers-hero{

    min-height:55vh;


    background:


    linear-gradient(

    rgba(10,10,10,.75),

    rgba(10,10,10,.80)

    ),


    url("../images/careers-banner.jpg");


    background-size:cover;


    background-position:center;


    display:flex;


    align-items:center;

}







/*==================================================
CAREERS INTRO
==================================================*/


.careers-section{

    background:var(--bg);

}



.careers-intro{


    max-width:850px;


    margin:auto;


    text-align:center;


}



.careers-intro p{


    line-height:1.9;

}







/*==================================================
JOB GRID
==================================================*/


.job-grid{


    margin-top:60px;


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));


    gap:35px;


}







/*==================================================
JOB CARD
==================================================*/


.job-card{


    background:var(--surface);


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


    border-radius:var(--radius);


    padding:40px;


    transition:var(--transition);


}



.job-card:hover{


    transform:translateY(-10px);


    border-color:var(--gold);


    box-shadow:var(--shadow);


}



.job-card i{


    font-size:2.8rem;


    color:var(--gold);


    margin-bottom:25px;


}



.job-card h3{


    margin-bottom:15px;


}



.job-card p{


    line-height:1.8;


}



.job-card .btn{


    margin-top:25px;


}







/*==================================================
CAREERS VALUES
==================================================*/


.career-values{


    background:var(--surface-dark);


}



.values-grid{


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(250px,1fr));


    gap:30px;


}



.value-card{


    background:var(--surface);


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


    border-radius:var(--radius);


    padding:35px;


    text-align:center;


}



.value-card h3{


    color:var(--gold);


    margin-bottom:15px;


}
/*==================================================
TEAM PAGE
==================================================*/


.team-hero{

    min-height:55vh;


    background:


    linear-gradient(

    rgba(10,10,10,.75),

    rgba(10,10,10,.80)

    ),


    url("../images/team-banner.jpg");


    background-size:cover;


    background-position:center;


    display:flex;


    align-items:center;

}







/*==================================================
TEAM SECTION
==================================================*/


.team-section{

    background:var(--bg);

}







/*==================================================
TEAM GRID
==================================================*/


.team-grid{


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));


    gap:40px;


}







/*==================================================
TEAM CARD
==================================================*/


.team-card{


    background:var(--surface);


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


    border-radius:var(--radius);


    padding:40px 30px;


    text-align:center;


    transition:var(--transition);


}



.team-card:hover{


    transform:translateY(-10px);


    border-color:var(--gold);


    box-shadow:var(--shadow);


}







/*==================================================
TEAM IMAGE
==================================================*/


.team-image{


    display:flex;


    justify-content:center;


    margin-bottom:25px;


}



.team-image img{


    width:120px;


    height:120px;


    border-radius:50%;


    object-fit:cover;


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


}







/*==================================================
TEAM TEXT
==================================================*/


.team-card h3{


    margin-bottom:10px;


}



.team-role{


    color:var(--gold);


    font-size:.85rem;


    font-weight:600;


    text-transform:uppercase;


    letter-spacing:2px;


    margin-bottom:20px;


}



.team-card p{


    line-height:1.8;


}
/*==================================================
CONTACT PAGE
==================================================*/


.contact-hero{

    min-height:55vh;


    background:


    linear-gradient(

    rgba(10,10,10,.75),

    rgba(10,10,10,.80)

    ),


    url("../images/contact-banner.jpg");


    background-size:cover;


    background-position:center;


    display:flex;


    align-items:center;

}







/*==================================================
CONTACT SECTION
==================================================*/


.contact-section{


    background:var(--bg);


}







/*==================================================
CONTACT GRID
==================================================*/


.contact-grid{


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:60px;


    align-items:start;


}







/*==================================================
CONTACT INFORMATION
==================================================*/


.contact-info{


    background:var(--surface);


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


    border-radius:var(--radius);


    padding:45px;


}



.contact-item{


    display:flex;


    align-items:flex-start;


    gap:25px;


    margin-bottom:40px;


}



.contact-item:last-child{


    margin-bottom:0;


}



.contact-item i{


    font-size:2rem;


    color:var(--gold);


    width:45px;


}



.contact-item h3{


    color:var(--gold);


    margin-bottom:10px;


}



.contact-item p{


    line-height:1.8;


}







/*==================================================
CONTACT FORM
==================================================*/


.contact-form{


    background:var(--surface);


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


    border-radius:var(--radius);


    padding:45px;


}



.contact-form form{


    display:flex;


    flex-direction:column;


    gap:20px;


}



.contact-form input,
.contact-form textarea{


    width:100%;


    padding:18px 20px;


    background:#08090c;


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


    border-radius:10px;


    color:white;


    font-size:1rem;


    transition:var(--transition);


}



.contact-form textarea{


    min-height:220px;


    resize:vertical;


}



.contact-form input:focus,
.contact-form textarea:focus{


    outline:none;


    border-color:var(--gold);


}



.contact-form button{


    width:max-content;


    margin-top:10px;


    cursor:pointer;


}
/*==================================================
BLOG PAGE
==================================================*/


.blog-section{

    background:var(--bg);

}







/*==================================================
BLOG LAYOUT
==================================================*/


.blog-layout{


    display:grid;


    grid-template-columns:3fr 1fr;


    gap:50px;


    align-items:start;


}







/*==================================================
FEATURED ARTICLE
==================================================*/


.featured-post{


    background:var(--surface);


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


    border-radius:var(--radius);


    overflow:hidden;


    box-shadow:var(--shadow);


}



.featured-post img{


    width:100%;


    height:450px;


    object-fit:cover;


}



.post-content{


    padding:40px;


}



.post-category{


    color:var(--gold);


    font-size:.85rem;


    font-weight:600;


    text-transform:uppercase;


    letter-spacing:2px;


}



.post-content h2{


    margin-top:20px;


    margin-bottom:20px;


}



.post-content p{


    line-height:1.8;


}







/*==================================================
BLOG GRID
==================================================*/


.blog-grid{


    display:grid;


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


    gap:35px;


    margin-top:50px;


}







/*==================================================
BLOG CARD
==================================================*/


.blog-card{


    background:var(--surface);


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


    border-radius:var(--radius);


    overflow:hidden;


    transition:var(--transition);


}



.blog-card:hover{


    transform:translateY(-10px);


    border-color:var(--gold);


    box-shadow:var(--shadow);


}



.blog-card img{


    width:100%;


    height:230px;


    object-fit:cover;


}



.blog-card-content{


    padding:30px;


}



.blog-card span{


    color:var(--gold);


    font-size:.85rem;


    font-weight:600;


}



.blog-card h3{


    margin:15px 0;


}



.blog-card a{


    display:inline-block;


    margin-top:20px;


    color:var(--gold);


    font-weight:600;


}







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


.blog-sidebar{


    background:var(--surface);


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


    border-radius:var(--radius);


    padding:35px;


}



.blog-sidebar h3{


    color:var(--gold);


    margin-bottom:25px;


}



.blog-sidebar li{


    padding:12px 0;


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


}



.blog-sidebar li:last-child{


    border-bottom:none;


}







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


.social-links{


    display:flex;


    gap:20px;


    margin-top:25px;


}



.social-links a{


    width:45px;


    height:45px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


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


    transition:var(--transition);


}



.social-links a:hover{


    background:var(--gold);


    color:#111;


}
/*==================================================
DOWNLOADS PAGE
==================================================*/


.downloads-hero{


    min-height:55vh;


    background:


    linear-gradient(

    rgba(10,10,10,.75),

    rgba(10,10,10,.80)

    ),


    url("../images/downloads-banner.jpg");


    background-size:cover;


    background-position:center;


    display:flex;


    align-items:center;


}







/*==================================================
DOWNLOAD SECTION
==================================================*/


.downloads-section{


    background:var(--bg);


}







/*==================================================
DOWNLOAD GRID
==================================================*/


.download-grid{


    display:grid;


    grid-template-columns:


    repeat(auto-fit,minmax(280px,1fr));


    gap:35px;


}







/*==================================================
DOWNLOAD CARD
==================================================*/


.download-card{


    background:var(--surface);


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


    border-radius:var(--radius);


    padding:40px 35px;


    transition:var(--transition);


    text-align:center;


}



.download-card:hover{


    transform:translateY(-10px);


    border-color:var(--gold);


    box-shadow:var(--shadow);


}







/*==================================================
DOWNLOAD ICON
==================================================*/


.download-card i{


    font-size:3rem;


    color:var(--gold);


    margin-bottom:25px;


}



.download-card h3{


    margin-bottom:20px;


}



.download-card p{


    line-height:1.8;


}







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


.download-button{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    margin-top:25px;


    padding:12px 28px;


    border-radius:50px;


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


    color:var(--gold);


    font-weight:600;


    transition:var(--transition);


}



.download-button:hover{


    background:var(--gold);


    color:#111;


    transform:translateY(-3px);


}
/*==================================================
SRD PAGE
==================================================*/


.srd-hero{


    min-height:55vh;


    background:


    linear-gradient(

    rgba(10,10,10,.75),

    rgba(10,10,10,.80)

    ),


    url("../images/srd-banner.jpg");


    background-size:cover;


    background-position:center;


    display:flex;


    align-items:center;


}







/*==================================================
SRD SECTION
==================================================*/


.srd-section{


    background:var(--bg);


}







/*==================================================
SRD INTRO
==================================================*/


.srd-intro{


    max-width:900px;


    margin:0 auto 60px;


    text-align:center;


}



.srd-intro p{


    line-height:1.9;


}







/*==================================================
SRD GRID
==================================================*/


.srd-grid{


    display:grid;


    grid-template-columns:


    repeat(auto-fit,minmax(280px,1fr));


    gap:35px;


}







/*==================================================
SRD CARD
==================================================*/


.srd-card{


    background:var(--surface);


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


    border-radius:var(--radius);


    padding:40px;


    transition:var(--transition);


}



.srd-card:hover{


    transform:translateY(-10px);


    border-color:var(--gold);


    box-shadow:var(--shadow);


}



.srd-card i{


    font-size:2.8rem;


    color:var(--gold);


    margin-bottom:25px;


}



.srd-card h3{


    margin-bottom:20px;


}



.srd-card p{


    line-height:1.8;


}







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


.srd-card a{


    display:inline-block;


    margin-top:25px;


    color:var(--gold);


    font-weight:600;


    transition:var(--transition);


}



.srd-card a:hover{


    letter-spacing:.5px;


}
/*==================================================
OGL PAGE
==================================================*/


.ogl-hero{


    min-height:55vh;


    background:


    linear-gradient(

    rgba(10,10,10,.75),

    rgba(10,10,10,.80)

    ),


    url("../images/ogl-banner.jpg");


    background-size:cover;


    background-position:center;


    display:flex;


    align-items:center;


}







/*==================================================
OGL SECTION
==================================================*/


.ogl-section{


    background:var(--bg);


}







/*==================================================
OGL INTRO
==================================================*/


.ogl-intro{


    max-width:900px;


    margin:0 auto 60px;


    text-align:center;


}



.ogl-intro p{


    line-height:1.9;


}







/*==================================================
LICENCE PANELS
==================================================*/


.ogl-grid{


    display:grid;


    grid-template-columns:


    repeat(auto-fit,minmax(300px,1fr));


    gap:35px;


}







/*==================================================
OGL CARD
==================================================*/


.ogl-card{


    background:var(--surface);


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


    border-radius:var(--radius);


    padding:40px;


    transition:var(--transition);


}



.ogl-card:hover{


    transform:translateY(-10px);


    border-color:var(--gold);


    box-shadow:var(--shadow);


}



.ogl-card h3{


    color:var(--gold);


    margin-bottom:20px;


}



.ogl-card p{


    line-height:1.9;


}







/*==================================================
LEGAL NOTICE BOX
==================================================*/


.ogl-notice{


    margin-top:60px;


    padding:40px;


    background:var(--surface-dark);


    border-left:4px solid var(--gold);


    border-radius:var(--radius);


}



.ogl-notice h3{


    margin-bottom:20px;


    color:var(--gold);


}



.ogl-notice p{


    line-height:1.9;


}







/*==================================================
OGL DOWNLOAD BUTTON
==================================================*/


.ogl-download{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    margin-top:30px;


    padding:14px 35px;


    border-radius:50px;


    background:var(--gold);


    color:#111;


    font-weight:600;


    transition:var(--transition);


}



.ogl-download:hover{


    background:var(--gold-light);


    transform:translateY(-3px);


    box-shadow:var(--shadow);


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


footer{


    background:var(--surface-dark);


    padding:90px 8% 30px;


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


}







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


.footer-grid{


    display:grid;


    grid-template-columns:


    1.5fr repeat(3,1fr);


    gap:50px;


}







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


.footer-column h3{


    color:var(--gold);


    margin-bottom:25px;


}



.footer-column h4{


    color:var(--gold);


    margin-bottom:25px;


    text-transform:uppercase;


    letter-spacing:2px;


}



.footer-column p{


    line-height:1.8;


}



.footer-column ul li{


    margin-bottom:12px;


}



.footer-column ul li a{


    color:var(--grey);


    transition:var(--transition);


}



.footer-column ul li a:hover{


    color:var(--gold);


    padding-left:5px;


}







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


.footer-divider{


    margin:50px 0;


    border:none;


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


}







/*==================================================
LEGAL INFORMATION
==================================================*/


.footer-legal,
.footer-disclaimer{


    max-width:900px;


    margin:auto;


    text-align:center;


}



.footer-legal h3,
.footer-disclaimer h3{


    color:var(--gold);


    margin-bottom:25px;


}



.footer-legal p,
.footer-disclaimer p{


    line-height:1.8;


}







/*==================================================
SOCIAL ICONS
==================================================*/


.footer-social{


    display:flex;


    justify-content:center;


    gap:20px;


    margin:40px 0;


}



.footer-social a{


    width:50px;


    height:50px;


    display:flex;


    align-items:center;


    justify-content:center;


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


    border-radius:50%;


    transition:var(--transition);


}



.footer-social i{


    font-size:1.3rem;


}



.footer-social a:hover{


    background:var(--gold);


    color:#111;


    transform:translateY(-5px);


}







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


.footer-bottom{


    display:flex;


    justify-content:space-between;


    align-items:center;


    gap:20px;


    flex-wrap:wrap;


}



.footer-bottom p{


    font-size:.9rem;


}



.footer-bottom a{


    color:var(--grey);


    transition:var(--transition);


}



.footer-bottom a:hover{


    color:var(--gold);


}
/*==================================================
RESPONSIVE SYSTEM
==================================================*/


/*==================================================
LARGE TABLETS / SMALL DESKTOPS
1200px AND BELOW
==================================================*/


@media(max-width:1200px){


    section{

        padding:80px 6%;

    }


    h1{

        font-size:3.5rem;

    }


    h2{

        font-size:2.5rem;

    }


    .company-grid{

        gap:40px;

    }


    .footer-grid{

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

    }


}





/*==================================================
TABLETS
900px AND BELOW
==================================================*/


@media(max-width:900px){


    section{

        padding:70px 5%;

    }



    /* NAVIGATION */


    .navbar{

        padding:10px 5%;

    }



    .nav-links{


        position:fixed;


        top:0;


        right:-100%;


        width:280px;


        height:100vh;


        background:var(--surface-dark);


        display:flex;


        flex-direction:column;


        justify-content:center;


        align-items:center;


        gap:35px;


        transition:.4s ease;


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


    }



    .nav-links.active{


        right:0;


    }



    .mobile-menu{


        display:block;


    }





    /* HERO */


    .hero-content{


        padding:100px 20px 0;


    }



    .hero-content h1{


        font-size:3rem;


    }



    .hero-buttons{


        flex-direction:column;


        width:100%;


        max-width:320px;


    }



    .hero-buttons .btn{


        width:100%;


        text-align:center;


    }





    /* TWO COLUMN LAYOUTS */


    .company-grid,
    .contact-grid,
    .blog-layout{


        grid-template-columns:1fr;


    }




    .company-image{


        order:-1;


    }





    /* BLOG */


    .blog-grid{


        grid-template-columns:1fr;


    }





    /* FOOTER */


    .footer-grid{


        grid-template-columns:1fr;


        text-align:center;


    }



}





/*==================================================
MOBILE PHONES
600px AND BELOW
==================================================*/


@media(max-width:600px){



    section{


        padding:60px 5%;


    }





    h1{


        font-size:2.3rem;


    }




    h2{


        font-size:2rem;


    }




    h3{


        font-size:1.3rem;


    }





    .logo img{


        width:60px;


        height:60px;


    }





    .hero{


        min-height:100svh;


    }





    .hero-content{


        padding:90px 15px 0;


    }





    .hero-tag{


        font-size:.75rem;


        letter-spacing:3px;


    }





    .hero-content p{


        font-size:.95rem;


    }





    /* ALL GRIDS */


    .game-grid,
    .features-grid,
    .resource-grid,
    .news-grid,
    .community-grid,
    .download-grid,
    .srd-grid,
    .ogl-grid,
    .team-grid{


        grid-template-columns:1fr;


    }





    /* CARDS */


    .game-content,
    .feature-card,
    .resource-card,
    .news-card,
    .team-card,
    .contact-info,
    .contact-form,
    .download-card,
    .srd-card,
    .ogl-card{


        padding:30px 25px;


    }





    /* CONTACT */


    .contact-item{


        gap:15px;


    }





    /* CTA */


    .cta-buttons{


        flex-direction:column;


        align-items:center;


    }





    .cta-buttons .btn{


        width:100%;


        max-width:300px;


    }





    /* FOOTER */


    footer{


        padding:60px 5% 25px;


    }





    .footer-bottom{


        flex-direction:column;


        text-align:center;


    }





}







/*==================================================
SMALL PHONES
400px AND BELOW
==================================================*/


@media(max-width:400px){



    .hero-content h1{


        font-size:2rem;


    }




    .hero-tag{


        letter-spacing:2px;


    }




    .nav-links{


        width:100%;


    }



}

/* ================================================= */
/* TSR CREATOR RESOURCES - FULL STYLING              */
/* ================================================= */


.creator-legal-resources {

    padding: 90px 0;

}


.creator-legal-resources .section-heading span {

    color: #c9a227;
    font-family: 'Cinzel', serif;
    font-weight: 600;

}


.creator-legal-resources .section-heading h2 {

    font-family: 'Cinzel', serif;
    font-size: 42px;
    color: #111;
    margin-bottom: 20px;

}


.creator-legal-resources .section-heading p {

    max-width: 750px;
    margin: auto;

}



.legal-resource-grid {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;

}



.legal-resource-card {

    background: #111;

    border: 1px solid rgba(201,162,39,0.5);

    padding: 40px 30px;

    text-align: center;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



.legal-resource-card::before {

    content: "";

    position: absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:#c9a227;

}



.legal-resource-card:hover {

    transform: translateY(-10px);

    border-color:#c9a227;

    box-shadow:
    0 15px 35px rgba(0,0,0,0.25);

}



.legal-resource-card i {

    font-size:45px;

    color:#c9a227;

    margin-bottom:25px;

}



.legal-resource-card h3 {

    font-family:'Cinzel', serif;

    color:white;

    font-size:24px;

    margin-bottom:15px;

}



.legal-resource-card p {

    color:#ddd;

    line-height:1.7;

    font-size:15px;

    margin-bottom:25px;

}



.legal-resource-card a {

    display:inline-block;

    color:#c9a227;

    font-weight:600;

    text-decoration:none;

    transition:0.3s ease;

}



.legal-resource-card a:hover {

    color:white;

}


/* ================================================= */
/* TSR CREATOR RESOURCES TYPOGRAPHY                 */
/* ================================================= */


.legal-resource-card h3 {

    font-family: 'Cinzel', serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
    text-transform: uppercase;

}



.legal-resource-card p {

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.8;
    color: #cfcfcf;

}



.legal-resource-card a {

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;

}



.creator-legal-resources .section-heading h2 {

    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;

}



.creator-legal-resources .section-heading p {

    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    color: #555;
    line-height: 1.8;

}

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


@media(max-width:1000px){


    .legal-resource-grid {

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

    }


}



@media(max-width:650px){


    .legal-resource-grid {

        grid-template-columns:1fr;

    }


    .creator-legal-resources {

        padding:60px 0;

    }


    .creator-legal-resources .section-heading h2 {

        font-size:32px;

    }


    .legal-resource-card {

        padding:35px 20px;

    }


}
/* ================================================= */
/* OGL PAGE REDESIGN                                 */
/* ================================================= */


.ogl-page {

    background:#111;

    color:#ddd;

    padding:80px 0;

}



.ogl-page .section-heading span {

    color:#c9a227;

}



.ogl-page h1,
.ogl-page h2,
.ogl-page h3,
.ogl-page h4 {

    font-family:'Cinzel', serif;

    color:#c9a227;

}



.ogl-page h2 {

    margin-top:60px;

    margin-bottom:25px;

    font-size:34px;

    border-bottom:1px solid #c9a227;

    padding-bottom:12px;

}



.ogl-page h3 {

    margin-top:35px;

    font-size:24px;

}



.ogl-page p {

    line-height:1.9;

    margin-bottom:20px;

    font-size:16px;

}



.ogl-page ul {

    margin:25px 0;

    padding-left:30px;

}



.ogl-page li {

    margin-bottom:12px;

    line-height:1.7;

}





/* ================================================= */
/* LICENSE TIERS                                     */
/* ================================================= */


.license-tier-grid {

    display:grid;

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

    gap:30px;

    margin:50px 0;

}



.license-tier-card {

    background:#181818;

    border:1px solid #c9a227;

    padding:35px;

    text-align:center;

    transition:.3s ease;

}



.license-tier-card:hover {

    transform:translateY(-10px);

    box-shadow:0 10px 30px rgba(201,162,39,.25);

}



.license-tier-card h3 {

    font-size:26px;

}



.license-tier-card h4 {

    color:#fff;

    margin-top:25px;

}



.license-tier-card ul {

    text-align:left;

}





/* ================================================= */
/* CONTENT BOXES                                     */
/* ================================================= */


.ogl-content-box {

    background:#191919;

    border-left:4px solid #c9a227;

    padding:35px;

    margin:40px 0;

}






/* ================================================= */
/* COPYRIGHT NOTICE                                  */
/* ================================================= */


.copyright-notice {

    background:#181818;

    border:1px solid #333;

    padding:40px;

    margin-top:60px;

    text-align:center;

}



.copyright-notice h2 {

    border:none;

}







/* ================================================= */
/* CREATOR LEGAL RESOURCES                           */
/* ================================================= */


.creator-legal-resources {

    padding:90px 0;

    background:#0d0d0d;

}



.legal-resource-grid {

    display:grid;

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

    gap:30px;

}



.legal-resource-card {

    background:#151515;

    border:1px solid #333;

    padding:40px 30px;

    text-align:center;

    transition:.3s ease;

}



.legal-resource-card:hover {

    border-color:#c9a227;

    transform:translateY(-8px);

}



.legal-resource-card i {

    font-size:40px;

    color:#c9a227;

    margin-bottom:20px;

}



.legal-resource-card h3 {

    font-size:22px;

}



.legal-resource-card a {

    display:inline-block;

    margin-top:20px;

    color:#c9a227;

    font-weight:600;

}





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


@media(max-width:900px){


.license-tier-grid,

.legal-resource-grid {

    grid-template-columns:1fr;

}



.ogl-page {

    padding:50px 20px;

}



.ogl-page h2 {

    font-size:26px;

}


}
.footer-column ul {
    list-style:none;
    padding:0;
}

.footer-column li {
    margin-bottom:10px;
}

.footer-column a {
    transition:0.3s ease;
}

.footer-column a:hover {
    padding-left:5px;
}
/* ================================================= */
/* TSR LTD FINAL POLISH                             */
/* ================================================= */


/* ================================================= */
/* GOLD CARD SYSTEM                                  */
/* ================================================= */


.game-card,
.legal-resource-card {

background:#111;

border:1px solid rgba(212,175,55,0.45);

border-radius:12px;

padding:35px;

transition:all 0.35s ease;

position:relative;

overflow:hidden;

}



.game-card::before,
.legal-resource-card::before {

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:3px;

background:#d4af37;

}



.game-card:hover,
.legal-resource-card:hover {

transform:translateY(-8px);

border-color:#d4af37;

box-shadow:
0 15px 35px rgba(0,0,0,0.45),
0 0 20px rgba(212,175,55,0.25);

}





/* ================================================= */
/* CARD HEADINGS                                     */
/* ================================================= */


.game-card h3,
.legal-resource-card h3 {

font-family:'Cinzel', serif;

color:#d4af37;

font-size:24px;

margin-top:20px;

}



.game-card p,
.legal-resource-card p {

line-height:1.8;

color:#ddd;

}





/* ================================================= */
/* ICON STYLING                                      */
/* ================================================= */


.game-card i,
.legal-resource-card i {

color:#d4af37;

margin-bottom:20px;

transition:0.3s ease;

}



.game-card:hover i,
.legal-resource-card:hover i {

transform:scale(1.15);

}





/* ================================================= */
/* GLOBAL HEADING CONSISTENCY                        */
/* ================================================= */


h1,
h2,
h3 {

font-family:'Cinzel', serif;

letter-spacing:0.5px;

}



.section-heading span {

color:#d4af37;

font-family:'Cinzel', serif;

text-transform:uppercase;

letter-spacing:2px;

}





/* ================================================= */
/* LEGAL DOCUMENT STYLING                            */
/* ================================================= */


.legal-document {

background:#0d0d0d;

border:1px solid rgba(212,175,55,0.25);

padding:50px;

border-radius:12px;

margin-bottom:50px;

}



.legal-document h3 {

color:#d4af37;

font-size:18px;

letter-spacing:3px;

margin-top:45px;

}



.legal-document h2 {

color:#fff;

margin-bottom:20px;

}



.legal-document p {

color:#ddd;

line-height:1.9;

margin-bottom:20px;

}



.legal-document ul {

margin-bottom:25px;

}



.legal-document li {

color:#ddd;

margin-bottom:12px;

line-height:1.7;

}
/* ================================================= */
/* TSR LTD FINAL POLISH PART 2                      */
/* ================================================= */


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


.btn {

font-family:'Cinzel', serif;

letter-spacing:1px;

border-radius:6px;

padding:14px 28px;

transition:all 0.3s ease;

}



.btn-primary {

background:#d4af37;

color:#111;

border:1px solid #d4af37;

}



.btn-primary:hover {

background:transparent;

color:#d4af37;

transform:translateY(-3px);

}



.btn-secondary {

background:transparent;

color:#d4af37;

border:1px solid #d4af37;

}



.btn-secondary:hover {

background:#d4af37;

color:#111;

transform:translateY(-3px);

}





/* ================================================= */
/* CREATOR RESOURCE GRID                             */
/* ================================================= */


.legal-resource-grid {

display:grid;

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

gap:30px;

}



.creator-legal-resources {

padding:80px 0;

}





/* ================================================= */
/* FOOTER LEGAL AREA                                 */
/* ================================================= */


.footer-legal,
.footer-disclaimer {

text-align:center;

max-width:850px;

margin:0 auto;

}



.footer-legal h3,
.footer-disclaimer h3 {

font-family:'Cinzel', serif;

color:#d4af37;

font-size:24px;

margin-bottom:20px;

}



.footer-legal p,
.footer-disclaimer p {

color:#ccc;

line-height:1.8;

}





.footer-bottom a {

color:#d4af37;

transition:0.3s ease;

}



.footer-bottom a:hover {

color:#fff;

}





/* ================================================= */
/* LEGAL PAGE SPACING                                */
/* ================================================= */


.legal-document .section-heading {

margin-bottom:45px;

}



.legal-document h2 {

margin-top:25px;

}



.legal-document h3:first-of-type {

margin-top:0;

}





/* ================================================= */
/* CREATOR HUB IMPROVEMENTS                           */
/* ================================================= */


.creator-resources .company-text {

padding-right:30px;

}



.creator-resources .company-image img {

border:1px solid rgba(212,175,55,0.4);

border-radius:12px;

}





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


@media(max-width:992px){


.footer-grid {

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

}



.legal-resource-grid {

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

}



.game-grid {

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

}



.legal-document {

padding:35px;

}



}




@media(max-width:768px){


.footer-grid {

grid-template-columns:1fr;

text-align:center;

}



.game-grid {

grid-template-columns:1fr;

}



.legal-resource-grid {

grid-template-columns:1fr;

}



.creator-resources .company-grid {

grid-template-columns:1fr;

}



.creator-resources .company-text {

padding-right:0;

}



.legal-document {

padding:25px;

}



.legal-document h2 {

font-size:24px;

}



.legal-document h3 {

font-size:16px;

}



.btn {

display:inline-block;

width:100%;

text-align:center;

margin-bottom:15px;

}



}





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


@media(max-width:480px){


.section-heading h2 {

font-size:28px;

}



.game-card,
.legal-resource-card {

padding:25px;

}



.footer-bottom p {

font-size:14px;

}



}
/* ================================================= */
/* TSR LTD FINAL POLISH PART 3                      */
/* FINAL VISUAL PASS                                 */
/* ================================================= */


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


.navbar {

border-bottom:1px solid rgba(212,175,55,0.25);

}



.nav-links a {

font-family:'Cinzel', serif;

letter-spacing:1px;

transition:all 0.3s ease;

position:relative;

}



.nav-links a::after {

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:#d4af37;

transition:0.3s ease;

}



.nav-links a:hover::after {

width:100%;

}



.nav-links a:hover {

color:#d4af37;

}





/* ================================================= */
/* HERO / SUB HEADER                                 */
/* ================================================= */


.sub-header {

position:relative;

background:
linear-gradient(
rgba(0,0,0,0.75),
rgba(0,0,0,0.85)
);

border-bottom:1px solid rgba(212,175,55,0.35);

}



.sub-header-content h1 {

font-family:'Cinzel', serif;

color:#d4af37;

font-size:52px;

letter-spacing:2px;

}



.sub-header-content p {

max-width:700px;

margin:auto;

color:#ddd;

font-size:18px;

line-height:1.8;

}





/* ================================================= */
/* SECTION VISUAL CONSISTENCY                        */
/* ================================================= */


section {

position:relative;

}



section:nth-child(even) {

background:#0b0b0b;

}



section:nth-child(odd) {

background:#111;

}





/* ================================================= */
/* GOLD SECTION DIVIDERS                             */
/* ================================================= */


.footer-divider,
.legal-divider {

border:none;

height:1px;

background:
linear-gradient(
90deg,
transparent,
#d4af37,
transparent
);

margin:50px 0;

}





/* ================================================= */
/* SECTION HEADINGS                                  */
/* ================================================= */


.section-heading {

text-align:center;

margin-bottom:60px;

}



.section-heading h2 {

font-family:'Cinzel', serif;

color:#fff;

font-size:38px;

}



.section-heading p {

max-width:750px;

margin:20px auto 0;

color:#ccc;

line-height:1.8;

}





/* ================================================= */
/* IMAGE PRESENTATION                                */
/* ================================================= */


.company-image img,
.game-card img,
.resource-card img {

width:100%;

border-radius:12px;

border:1px solid rgba(212,175,55,0.35);

transition:0.4s ease;

}



.company-image img:hover,
.game-card img:hover,
.resource-card img:hover {

transform:scale(1.03);

box-shadow:
0 10px 30px rgba(0,0,0,0.5);

}





/* ================================================= */
/* GOLD ACCENT TEXT                                  */
/* ================================================= */


strong {

color:#d4af37;

}



a {

transition:0.3s ease;

}





/* ================================================= */
/* TABLE / DOCUMENT CONTENT                          */
/* ================================================= */


.legal-document table {

width:100%;

border-collapse:collapse;

margin:30px 0;

}



.legal-document th {

background:#111;

color:#d4af37;

font-family:'Cinzel', serif;

padding:15px;

border:1px solid rgba(212,175,55,0.3);

}



.legal-document td {

padding:15px;

border:1px solid rgba(212,175,55,0.15);

color:#ddd;

}





/* ================================================= */
/* FINAL MOBILE HERO ADJUSTMENTS                     */
/* ================================================= */


@media(max-width:768px){


.sub-header-content h1 {

font-size:34px;

}



.sub-header-content p {

font-size:16px;

}



.section-heading h2 {

font-size:30px;

}



}



@media(max-width:480px){


.sub-header-content h1 {

font-size:28px;

}



.section-heading h2 {

font-size:26px;

}



}