/* Center all hero section content horizontally and vertically */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    width: 100%;
}
.hero-center-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.hero-text {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* Center hero section content horizontally and vertically */
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}
.hero-text {
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
/* Center hero text and make it larger */
.hero-text {
    text-align: center;
    align-items: center;
    justify-content: center;
}
.hero-title {
    font-size: 4rem;
    letter-spacing: 0.15em;
    margin-bottom: 1.2rem;
}
.hero-subtitle {
    font-size: 1.7rem;
    margin-bottom: 1.2rem;
    letter-spacing: 0.08em;
}
.hero-description {
    font-size: 1.15rem;
    margin-bottom: 2.2rem;
    color: #c9b876;
}
/* Centered Hero Logo Wrapper */
.hero-logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.5rem;
}
/* Hero Section Logo Image */
.hero-logo-image {
    display: block;
    margin: 0 auto;
    max-width: 140px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 24px #000a);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Crimson Text', serif;
    line-height: 1.6;
    color: #c9b876;
    background: #0f0f0f;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Gothic Background Overlay */
.page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(201, 184, 118, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(201, 184, 118, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
    z-index: -1;
    pointer-events: none;
}

/* Banner Section */
.banner-section {
    width: 100%;
    overflow: hidden;
    background: #181818;
    border-bottom: 2px solid #65572a;
}

.banner-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100vw;
    object-fit: cover;
    aspect-ratio: 2559/1361;
    /* fallback for browsers without aspect-ratio */
    background: #222;
    box-shadow: 0 4px 32px rgba(0,0,0,0.4);
}

/* Header */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid #c9b876;
    z-index: 1000;
    padding: 1rem 0;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo {
    height: 40px;
    width: auto;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8));
}

.game-title {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #c9b876;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 3px;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    color: #c9b876;
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    letter-spacing: 1px;
    transition: color 0.3s ease;
    position: relative;
}

.nav-menu a:hover {
    color: #f4e8a8;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #c9b876;
    transition: width 0.3s ease;
}

.nav-menu a:hover::after {
    width: 100%;
}

/* Social Links */
.social-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(26, 26, 26, 0.8);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-link:hover {
    transform: translateY(-2px);
    border-color: #c9b876;
    box-shadow: 0 5px 15px rgba(201, 184, 118, 0.3);
}

.social-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: filter 0.3s ease;
}

.social-link:hover .social-icon {
    filter: brightness(1.3);
}

/* Social Media Icons */
.discord-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9b876'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418Z'/%3E%3C/svg%3E");
}

.youtube-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9b876'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.steam-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9b876'%3E%3Cpath d='M11.979 0C5.678 0 .511 4.86.022 11.037l6.432 2.658c.545-.371 1.203-.59 1.912-.59.063 0 .125.004.188.006l2.861-4.142V8.91c0-2.495 2.028-4.524 4.524-4.524 2.494 0 4.524 2.031 4.524 4.527s-2.03 4.525-4.524 4.525h-.105l-4.076 2.911c0 .052.004.105.004.159 0 1.875-1.515 3.396-3.39 3.396-1.635 0-3.016-1.173-3.331-2.727L.436 15.27C1.862 20.307 6.486 24 11.979 24c6.624 0 11.99-5.38 11.99-12C23.97 5.38 18.603.001 11.979.001zM7.54 18.21l-1.473-.61c.262.543.714.999 1.314 1.25 1.297.539 2.793-.076 3.332-1.375.263-.63.264-1.319.005-1.949s-.75-1.121-1.377-1.383c-.624-.26-1.29-.249-1.878-.03l1.523.63c.956.4 1.409 1.5 1.009 2.453-.397.955-1.5 1.409-2.455 1.014zm8.555-11.2c0-1.662-1.353-3.015-3.015-3.015-1.665 0-3.015 1.353-3.015 3.015 0 1.665 1.35 3.015 3.015 3.015 1.662 0 3.015-1.35 3.015-3.015zm-5.273 0c0-1.252 1.013-2.266 2.265-2.266 1.249 0 2.266 1.014 2.266 2.266 0 1.251-1.017 2.265-2.266 2.265-1.252 0-2.265-1.014-2.265-2.265z'/%3E%3C/svg%3E");
}

.patreon-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9b876'%3E%3Cpath d='M0 .48v23.04h4.22V.48zm15.385 0c-4.764 0-8.641 3.88-8.641 8.65 0 4.755 3.877 8.623 8.641 8.623 4.75 0 8.615-3.868 8.615-8.623C24 4.36 20.136.48 15.385.48z'/%3E%3C/svg%3E");
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
    background: 
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><rect width="1000" height="1000" fill="%23111"/><circle cx="200" cy="300" r="100" fill="%23222" opacity="0.1"/><circle cx="800" cy="700" r="150" fill="%23333" opacity="0.1"/></svg>');
    background-size: cover;
    background-position: center;
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-title {
    font-family: 'Cinzel', serif;
    font-size: 4rem;
    font-weight: 700;
    color: #c9b876;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
    letter-spacing: 4px;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.hero-subtitle {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    color: #b8a466;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-description {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    color: #a69660;
    max-width: 500px;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    letter-spacing: 1px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(45deg, #65572a, #c9b876);
    color: #1a1a1a;
    border-color: #c9b876;
}

.btn-primary:hover {
    background: linear-gradient(45deg, #c9b876, #65572a);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(201, 184, 118, 0.3);
}

.btn-secondary {
    background: transparent;
    color: #c9b876;
    border-color: #c9b876;
}

.btn-secondary:hover {
    background: #c9b876;
    color: #1a1a1a;
    transform: translateY(-2px);
}

.btn-large {
    padding: 1.2rem 2.5rem;
    font-size: 1.1rem;
}

/* Knight Silhouette */
.knight-silhouette {
    width: 400px;
    height: 500px;
    background: linear-gradient(135deg, rgba(101, 87, 42, 0.8), rgba(0, 0, 0, 0.9));
    clip-path: polygon(40% 0%, 60% 0%, 65% 15%, 70% 20%, 75% 30%, 80% 40%, 85% 60%, 85% 80%, 80% 90%, 70% 95%, 30% 95%, 20% 90%, 15% 80%, 15% 60%, 20% 40%, 25% 30%, 30% 20%, 35% 15%);
    position: relative;
    margin: 0 auto;
    animation: glow 3s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 20px rgba(201, 184, 118, 0.3);
    }
    to {
        box-shadow: 0 0 40px rgba(201, 184, 118, 0.6);
    }
}

/* Sections */
.section-title {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    color: #c9b876;
    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Features Section */
.features {
    padding: 5rem 0;
    background: linear-gradient(135deg, rgba(13, 13, 13, 0.95), rgba(26, 26, 26, 0.95));
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: rgba(26, 26, 26, 0.8);
    padding: 2rem;
    border-radius: 10px;
    border: 2px solid #65572a;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(201, 184, 118, 0.2);
    border-color: #c9b876;
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.feature-card h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    color: #c9b876;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.feature-card p {
    color: #a69660;
    line-height: 1.6;
}

/* Gameplay Section */
.gameplay {
    padding: 5rem 0;
    background: rgba(13, 13, 13, 0.9);
}

.gameplay-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.gameplay-text h3 {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: #c9b876;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

.gameplay-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    color: #a69660;
}

.gameplay-features {
    list-style: none;
}

.gameplay-features li {
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    color: #c9b876;
}

.game-screenshot {
    width: 100%;
    height: 300px;
    background: linear-gradient(45deg, rgba(101, 87, 42, 0.3), rgba(201, 184, 118, 0.2));
    border: 2px solid #65572a;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.game-screenshot::before {
    content: '🎮 Game Preview';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Cinzel', serif;
    color: #c9b876;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

/* Campaign System Section */
.campaigns {
    padding: 5rem 0;
    background: linear-gradient(135deg, rgba(13, 13, 13, 0.95), rgba(26, 26, 26, 0.95));
}

.campaign-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}


.campaign-text h3 {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: #c9b876;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

.campaign-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    color: #a69660;
}

.campaign-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 1.1rem;
}

.campaign-bullets li {
    color: #c9b876;
    font-family: 'Crimson Text', serif;
    padding-left: 0.5rem;
}

.campaign-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.campaign-map {
    width: 300px;
    height: 300px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3px;
    background: #1a1a1a;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #65572a;
}

.map-region {
    border-radius: 4px;
    border: 1px solid rgba(201, 184, 118, 0.3);
    transition: all 0.3s ease;
    position: relative;
}

.map-region:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(201, 184, 118, 0.5);
}

.map-region.faction-1 {
    background: linear-gradient(45deg, #8b4513, #a0522d);
}

.map-region.faction-2 {
    background: linear-gradient(45deg, #2f4f4f, #4682b4);
}

.map-region.faction-3 {
    background: linear-gradient(45deg, #8b0000, #cd5c5c);
}

.map-region.neutral {
    background: linear-gradient(45deg, #696969, #808080);
}

.map-region.bandit {
    background: linear-gradient(45deg, #1a1a1a, #333333);
}

.map-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.9rem;
    color: #a69660;
    font-family: 'Cinzel', serif;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(201, 184, 118, 0.3);
}

.legend-color.faction-1 {
    background: linear-gradient(45deg, #8b4513, #a0522d);
}

.legend-color.faction-2 {
    background: linear-gradient(45deg, #2f4f4f, #4682b4);
}

.legend-color.faction-3 {
    background: linear-gradient(45deg, #8b0000, #cd5c5c);
}

.legend-color.neutral {
    background: linear-gradient(45deg, #696969, #808080);
}

.legend-color.bandit {
    background: linear-gradient(45deg, #1a1a1a, #333333);
}

/* Download Section */
.download {
    padding: 5rem 0;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(13, 13, 13, 0.95));
    text-align: center;
}

.download-content {
    max-width: 600px;
    margin: 0 auto;
}

.download-description {
    font-size: 1.2rem;
    color: #a69660;
    margin-bottom: 2rem;
    line-height: 1.8;
}

.download-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.download-note {
    color: #8b8170;
    font-style: italic;
}

/* Footer */
.footer {
    background: rgba(15, 15, 15, 0.98);
    padding: 3rem 0 1rem;
    border-top: 2px solid #65572a;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
    font-family: 'Cinzel', serif;
    color: #c9b876;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.footer-section ul {
    list-style: none;
}

.footer-section li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: #a69660;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #c9b876;
}

.game-info {
    font-size: 0.9rem;
    color: #8b8170;
    font-style: italic;
    margin-top: 0.5rem;
}

.dev-note {
    margin-top: 1.2rem;
    font-size: 1.05rem;
    color: #a69660;
    line-height: 1.7;
}
.dev-note strong {
    color: #c9b876;
}
.dev-note a.patreon-link {
    color: #c9b876;
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.2s;
}
.dev-note a.patreon-link:hover {
    color: #b8a466;
}

.footer-social {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.footer-social .social-link {
    width: 35px;
    height: 35px;
}

.footer-social .social-icon {
    width: 18px;
    height: 18px;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #333;
    color: #8b8170;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav {
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .nav-brand {
        order: 1;
    }
    
    .social-links {
        order: 2;
    }
    
    .nav-menu {
        order: 3;
        width: 100%;
        justify-content: center;
        display: none;
    }
    
    .nav-menu.active {
        display: flex;
        flex-direction: column;
        background: rgba(13, 13, 13, 0.98);
        padding: 1rem;
        border-radius: 10px;
        margin-top: 1rem;
    }
    
    .social-links {
        gap: 0.5rem;
    }
    
    .social-link {
        width: 35px;
        height: 35px;
    }
    
    .social-icon {
        width: 18px;
        height: 18px;
    }
    
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .gameplay-content {
        grid-template-columns: 1fr;
    }
    
    .campaign-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .campaign-map {
        width: 250px;
        height: 250px;
    }
    
    .download-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .knight-silhouette {
        width: 300px;
        height: 400px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #65572a;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #c9b876;
}