:root {
    --transition: 800ms;
    --vh: 1vh; 
}

html {
   scroll-behavior: smooth; 
}

html, body {
    height: 100%;
    margin: 0;
    font-family: "Lato", sans-serif;
    background: #0c0c0c;
    color: #fff;
}

/* --- Desktop Default: Horizontal Scroll --- */
body {
     overflow: hidden; /* Hide scrollbars for desktop */
}

#viewport {
    width: 100vw;
    height: 100vh; /* Use vh for desktop viewport */
    overflow: hidden; /* Crucial for horizontal scroll */
    position: relative; 
}

#container {
    display: flex; /* Horizontal layout */
    width: 400vw; /* 4 sections * 100vw each */
    height: 100%; /* Fill viewport height */
    transition: transform var(--transition) cubic-bezier(.22, .9, .21, 1);
    will-change: transform;
}

section {
    width: 100vw;
    height: 100%; /* Fill container height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 90px 40px;
    box-sizing: border-box;
    position: relative; 
    overflow: hidden; /* Prevent internal scrollbars by default on desktop sections */
}
 /* --- End Desktop Default --- */
 
/* Header */
header {
    position: fixed; top: 0; left: 0; right: 0; height: 68px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4));
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 28px; z-index: 1000; box-sizing: border-box;
}
.logo { font-family: "Cinzel", serif; font-weight: 700; letter-spacing: 2px; color: #fff; text-decoration: none; transition: color 300ms; z-index: 1002; }
header nav { /* Base style for nav container */ }
header nav a { font-family: "Cinzel", serif; color: #fff; text-decoration: none; margin: 0 12px; cursor: pointer; transition: color 300ms; }
.logo:hover, header nav a:hover { color: #d4aa00; }
header nav a.active { color: #d4aa00; text-shadow: 0 0 5px rgba(212, 170, 0, 0.7); } /* Desktop active state */

/* Mobile Menu Toggle */
.menu-toggle { display: none; width: 28px; height: 22px; position: relative; cursor: pointer; z-index: 1002; background: transparent; border: none; padding: 0; }
.menu-toggle span { display: block; position: absolute; height: 3px; width: 100%; background: #fff; border-radius: 3px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; }
.menu-toggle span:nth-child(1) { top: 0px; } .menu-toggle span:nth-child(2) { top: 9px; } .menu-toggle span:nth-child(3) { top: 18px; }
.menu-toggle.active span:nth-child(1) { top: 9px; transform: rotate(135deg); } .menu-toggle.active span:nth-child(2) { opacity: 0; left: -28px; } .menu-toggle.active span:nth-child(3) { top: 9px; transform: rotate(-135deg); }

/* Home Section Specific */
#home { background: radial-gradient(circle at 20% 20%, rgba(255, 200, 80, 0.06), transparent 10%), linear-gradient(120deg, #07111a 0%, #0c0c0c 100%); }
.home-content-wrapper { width: 100%; text-align: center; }
#home .title { font-family: "Cinzel", serif; font-size: 56px; margin-bottom: 12px; text-align: center; }
#home .sub-title { font-family: "Cinzel", serif; font-size: 20px; opacity: 0.9; text-align: center; }
.button { font-family: "Cinzel", serif; margin-top: 18px; padding: 12px 28px; background: #d4aa00; border-radius: 6px; color: #000; font-weight: 700; cursor: pointer; transition: background 300ms, box-shadow 300ms, transform 300ms; text-decoration: none; display: inline-block; }
.button:hover { background: #ffce1a; box-shadow: 0 0 10px rgba(255, 206, 26, 0.5); transform: translateY(-2px); }

/* Download Buttons */
.download-container { position: absolute; bottom: 40px; left: 40px; display: flex; gap: 20px; align-items: center; z-index: 10; width: auto; max-width: none; background: none; padding: 0; }
.button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.store-button { display: flex; align-items: center; background: #1a1a1a; background-image: linear-gradient(160deg, rgba(212, 170, 0, 0.0) 70%, rgba(212, 170, 0, 0.15) 85%, rgba(212, 170, 0, 0.0) 100%); border: 1px solid #444; border-radius: 8px; padding: 12px 18px; min-width: 210px; color: #fff; text-decoration: none; transition: background 300ms, border-color 300ms, transform 300ms; }
.store-button:hover { background-color: #2a2a2a; border-color: #d4aa00; transform: translateY(-2px); }
.store-button svg { width: 32px; height: 32px; margin-right: 15px; fill: #fff; }
.store-button .button-text { display: flex; flex-direction: column; line-height: 1.3; }
.store-button .button-text-sub { font-size: 12px; opacity: 0.8; text-transform: uppercase; }
.store-button .button-text-main { font-size: 18px; font-weight: 700; font-family: "Cinzel", serif; }

/* Dot Navigation (Desktop Only) */
nav.dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 1100; }
.dot-highlight { position: absolute; width: 12px; height: 12px; background: #d4aa00; border-radius: 50%; transform: scale(1.3); box-shadow: 0 0 10px rgba(212, 170, 0, 0.7); z-index: 1; top: 0; transition: transform 500ms cubic-bezier(0.22, 0.9, .21, 1); will-change: transform; }
.dot { position: relative; z-index: 2; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); cursor: pointer; transition: background 300ms, transform 200ms ease; text-decoration: none; }
.dot:hover { transform: scale(1.2); background: rgba(255, 255, 255, 0.5); }
.dot.active { background: transparent; transform: scale(1); }
.dot.active:hover { transform: scale(1.2); background: rgba(255, 255, 255, 0.5); }
.dot::before { content: attr(data-tooltip); position: absolute; top: 50%; right: 100%; transform: translateY(-50%); margin-right: 12px; padding: 4px 10px; background: #1a1a1a; border: 1px solid #444; color: #fff; font-family: "Lato", sans-serif; font-size: 14px; border-radius: 4px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms, visibility 200ms; }
.dot:hover::before { opacity: 1; visibility: visible; }

/* Content Sections (News, Factions, Dev) - Inner Scroll Handling */
.devlog-page, .news-page { justify-content: flex-start; padding-top: 100px; padding-bottom: 40px; overflow: hidden; }
.scrollable-content { width: 100%; height: 100%; overflow-y: auto; max-width: 1100px; margin: 0 auto; }
.roadmap-content { max-width: 900px; } 
.news-layout { 
    display: grid; 
    grid-template-columns: 1fr 350px; 
    grid-template-rows: auto 1fr; 
    width: 100%; 
    height: 100%; 
    gap: 20px 40px; 
    align-items: end; /* <-- MODIFIED: Was 'start', now 'end' */
    max-width: 1200px; 
    margin: 0 auto; 
}

h2 { font-family: "Cinzel", serif; }
.roadmap-content h2, .faction-content h2, .news-title-header { text-align: center; font-size: 32px; color: #d4aa00; margin-bottom: 30px; margin-top: 0; }
.news-title-header { grid-column: 1 / 3; text-align: left; margin-bottom: 10px; align-self: start; } /* Added align-self to keep title at top of its row */
.roadmap-content h3, .faction-pane h3 { font-size: 24px; color: #fff; border-bottom: 1px solid #555; padding-bottom: 8px; margin-top: 25px; margin-bottom: 20px; }
.faction-pane h3 { font-size: 28px; border-bottom: none; margin-top: 0; }

/* Patch Grid & Entries */
.patch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; }
.patch-entry { background: rgba(255, 255, 255, 0.03); border: 1px solid #333; border-radius: 8px; padding: 20px; transition: border-color 300ms, transform 300ms; }
.patch-entry:hover { border-color: #d4aa00; transform: translateY(-2px); }
.patch-title { font-family: "Cinzel", serif; font-size: 18px; font-weight: 700; }
.patch-status { font-style: italic; opacity: 0.8; margin-left: 10px; }
.patch-status-completed { color: #00e04e; } .patch-status-inprogress { color: #d4aa00; } .patch-status-upcoming { color: #aaa; }
.patch-desc-sub { font-size: 16px; font-weight: 700; margin-top: 12px; opacity: 1; }
.patch-desc { font-size: 15px; opacity: 0.9; margin-top: 5px; line-height: 1.5; }
 
/* Factions */
/* --- THESE TWO RULES FIX THE ALIGNMENT --- */
#factions {
    align-items: flex-start; /* Aligns content block to the left */
}
#factions .scrollable-content {
    margin: 0; /* Removes auto-centering from the content block */
}
 
.faction-layout { display: flex; flex-direction: row; width: 100%; height: 100%; gap: 40px; }
.faction-nav { flex-basis: 300px; flex-shrink: 0; border-right: 1px solid #444; padding-right: 30px; padding-top: 10px; overflow-y: auto; }
.faction-nav ul { list-style: none; padding: 0; margin: 0; }
.faction-nav .faction-link { display: block; padding: 15px 20px; font-family: "Cinzel", serif; font-size: 18px; text-decoration: none; color: #aaa; border-left: 3px solid transparent; transition: background 300ms, color 300ms, border-color 300ms; }
.faction-nav .faction-link:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.faction-nav .faction-link.active { color: #d4aa00; border-left-color: #d4aa00; background: rgba(212, 170, 0, 0.08); }
.faction-content { flex-grow: 1; overflow-y: auto; } 
.faction-pane { display: none; animation: fadeIn 600ms ease-out; } .faction-pane.active { display: block; }
.faction-image { width: 100%; height: auto; border-radius: 8px; margin-bottom: 20px; background: #222; max-height: 300px; object-fit: cover; }
.faction-pane p { font-size: 16px; line-height: 1.6; opacity: 0.9; margin-bottom: 15px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
 
/* Dev Tabs */
.dev-nav { display: flex; flex-direction: row; justify-content: center; gap: 10px; margin-bottom: 30px; border-bottom: 1px solid #444; padding-bottom: 20px; }
.dev-link { font-family: "Cinzel", serif; font-size: 18px; font-weight: 700; color: #aaa; text-decoration: none; padding: 10px 20px; border: 1px solid #444; border-radius: 6px; transition: background 300ms, color 300ms, border-color 300ms; }
.dev-link:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.dev-link.active { background: #d4aa00; border-color: #d4aa00; color: #000; box-shadow: 0 0 10px rgba(212, 170, 0, 0.5); }
.dev-pane { display: none; animation: fadeIn 600ms ease-out; } .dev-pane.active { display: block; }

/* News Section */
.featured-news { grid-column: 1 / 2; grid-row: 2 / 3; overflow-y: auto; padding-right: 10px; }
.featured-article { display: block; text-decoration: none; color: #fff; background: rgba(255, 255, 255, 0.03); border: 1px solid #333; border-radius: 8px; padding: 20px; cursor: pointer; transition: background 300ms, border-color 300ms; margin-bottom: 20px; }
.featured-article:hover { background: rgba(255, 255, 255, 0.05); border-color: #d4aa00; }
.article-header { display: flex; align-items: baseline; font-family: "Cinzel", serif; margin-bottom: 5px; }
.article-type { color: #d4aa00; font-size: 20px; margin-right: 10px; white-space: nowrap; }
.article-title { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2; }
.article-meta { font-size: 14px; color: #aaa; margin-bottom: 15px; }
.meta-item-divider { opacity: 0.5; margin: 0 8px; }
.featured-image { width: 100%; height: auto; border-radius: 6px; display: block; margin-bottom: 15px; max-height: 350px; object-fit: cover; }
.news-feed { grid-column: 2 / 3; grid-row: 2 / 3; border: 1px solid #333; background: rgba(0, 0, 0, 0.5); padding: 15px; border-radius: 8px; max-height: 100%; overflow-y: auto; }
.news-feed-header { font-family: "Cinzel", serif; font-size: 18px; font-weight: 700; color: #d4aa00; border-bottom: 1px solid #444; padding-bottom: 10px; margin-bottom: 10px; }
.news-feed ul { list-style: none; padding: 0; margin: 0; }
.news-feed li a { display: block; padding: 8px 0; font-size: 15px; color: #fff; text-decoration: none; transition: color 300ms, opacity 300ms; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-feed li a:hover { color: #d4aa00; opacity: 1; }
.info-type { font-weight: bold; margin-right: 5px; color: #d4aa00; }
.more-link { display: block; text-align: right; font-size: 14px; color: #aaa; text-decoration: none; padding-top: 10px; border-top: 1px solid #444; margin-top: 10px; transition: color 300ms; }
.more-link:hover { color: #fff; }
 
/* Blog Overlay */
#blog-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.95); z-index: 2000; display: none; opacity: 0; transition: opacity 300ms; overflow-y: auto; padding: 80px 40px; box-sizing: border-box; }
#blog-overlay.active { display: block; opacity: 1; }
.blog-content { width: 100%; max-width: 900px; margin: 0 auto; color: #fff; padding-bottom: 50px; }
.blog-content h1 { font-family: "Cinzel", serif; font-size: 48px; color: #d4aa00; margin-bottom: 10px; }
.blog-content h3 { font-family: "Lato", sans-serif; font-size: 20px; opacity: 0.8; margin-top: 0; margin-bottom: 30px; }
.blog-content p, .blog-content ul { font-size: 16px; line-height: 1.6; margin-bottom: 18px; opacity: 0.9; }
.blog-content .body-list-header { font-family: "Lato", sans-serif; font-size: 20px; font-weight: 700; color: #fff; margin-top: 30px; margin-bottom: 10px; }
.blog-content ul { list-style: disc; padding-left: 20px; }
.blog-close { position: absolute; top: 30px; left: 40px; font-family: "Cinzel", serif; font-size: 16px; text-transform: uppercase; font-weight: 700; color: #fff; cursor: pointer; z-index: 2001; padding: 5px 10px; border: 1px solid transparent; border-radius: 4px; transition: color 300ms, border-color 300ms; text-decoration: none; }
.blog-close:hover { color: #d4aa00; border-color: #d4aa00; }
 
 
/* === MOBILE STYLES (768px and below) === */
@media (max-width:768px) {
     /* --- Basic Resets & Font Sizes --- */
    #home .title, .blog-content h1 { font-size: 32px; }
    #home .sub-title { font-size: 16px; }
    .patch-grid { grid-template-columns: 1fr; }

     /* --- Enable Vertical Body Scroll & Disable Horizontal --- */
    body { 
         overflow-y: auto !important; 
         overflow-x: hidden !important;
    }
    #viewport { 
         height: auto !important; 
         overflow: visible !important; 
    }
    #container { 
         display: block !important; /* Stack sections vertically */
         width: 100% !important; 
         height: auto !important; 
         transform: none !important; /* Disable horizontal transform */
         transition: none !important; 
    }
     
    section {
         width: 100% !important; 
         min-width: 0 !important; 
         height: auto !important; /* Let content define height */
         /* Ensure section fills *at least* the screen height minus header */
         min-height: calc(100vh - 68px); 
         min-height: calc(var(--vh, 1vh) * 100 - 68px); 
         padding: 90px 20px 40px 20px !important; 
         box-sizing: border-box !important;
         overflow: visible !important; /* Let body scroll handle it */
         justify-content: flex-start !important; /* Align content to top by default */
    }

     /* --- Mobile Home Section --- */
    #home {
         /* Center content vertically */
         justify-content: center !important; 
         /* Standard top padding */
         padding-top: 90px !important; 
         /* Add extra padding at the bottom to account for the download bar */
         padding-bottom: 40px !important;
         min-height: calc(var(--vh, 1vh) * 100); /* Try to fill screen fully */
    }
     .home-content-wrapper { 
         margin-top: 0 !important; 
         /* Add margin at the bottom to create space from download buttons */
         margin-bottom: 30px !important; 
     }
     #home .button { margin-bottom: 0 !important; margin-top: 18px !important;}

     /* --- Mobile Download Bar (NOT FIXED) --- */
    .download-container {
         position: relative !important; /* KEY FIX: Back to relative flow */
         bottom: auto !important; /* Reset */
         left: auto !important; /* Reset */
         
         /* Center the container itself */
         display: flex !important; 
         justify-content: center !important; 
         align-items: center !important; 
         width: 100% !important;
         max-width: 350px !important; /* Constrain width */
         padding: 0 10px !important; /* Add side padding */
         box-sizing: border-box !important;

         /* Remove fixed-bar styles */
         transform: none !important; 
         background: none !important; 
         z-index: 10 !important;
         height: auto !important; 
    }
    .button-grid {
         grid-template-columns: 1fr 1fr !important; 
         gap: 15px !important; 
         width: 100% !important; 
    }
    .store-button { padding: 10px !important; min-width: 0 !important; }
    .store-button svg { width: 20px !important; height: 20px !important; margin-right: 8px !important; }
    .store-button .button-text-sub { font-size: 10px !important; }
    .store-button .button-text-main { font-size: 14px !important; }
     /* --- End Mobile Download Bar --- */

     /* --- Mobile Navigation --- */
    .menu-toggle { display: block !important; }
    nav.dots { display: none !important; }
    header nav {
         position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100vh !important; 
         background: #0c0c0c !important; display: flex !important; flex-direction: column !important;
         align-items: center !important; justify-content: center !important;
         transform: translateX(100%) !important; z-index: 1001 !important; 
         transition: transform 0.4s cubic-bezier(.22, .9, .21, 1) !important; 
    }
    header nav.mobile-active { transform: translateX(0%) !important; }
    header nav a { margin: 15px 0 !important; font-size: 20px !important; } 
     header nav a.active { color: #fff !important; text-shadow: none !important; } 
     /* --- End Mobile Navigation --- */
     
     /* --- Mobile Content Sections (News, Factions, Dev) --- */
      .devlog-page, .news-page {
         padding-bottom: 60px !important; 
         min-height: calc(var(--vh, 1vh) * 100); 
         height: auto !important;
         overflow: visible !important; 
     }
      .scrollable-content {
         height: auto !important; 
         overflow-y: visible !important; /* Disable inner scroll */
         max-width: 100% !important; 
     }
      .roadmap-content { max-width: 100% !important; margin: 0 !important;} 
      .news-layout { max-width: 100% !important; } 
       
     /* News specific stacking */
    .news-layout { display: flex !important; flex-direction: column !important; gap: 20px !important; align-items: center !important; height: auto !important; width: 100% !important; }
    .news-title-header { text-align: center !important; order: 1 !important; margin-bottom: 0 !important;}
    .news-feed { order: 2 !important; width: 100% !important; margin-top: 10px !important; max-height: none !important; overflow-y: visible !important; border: none !important; background: none !important; padding: 0 !important;} 
      .news-feed-header { border-bottom: none !important; text-align: center !important;}
      .news-feed ul { padding-bottom: 10px !important; }
    .featured-news { order: 3 !important; width: 100% !important; margin-top: 15px !important; padding-right: 0 !important; overflow: visible !important; }
    .featured-news .featured-image { display: none !important; }
    .featured-article { padding: 15px !important; margin-bottom: 0 !important; } 
    .article-header { flex-direction: column !important; align-items: flex-start !important; margin-bottom: 5px !important; }
    .article-type { font-size: 16px !important; margin-bottom: 5px !important; }
    .article-title { font-size: 18px !important; line-height: 1.3 !important; }
    .article-meta { font-size: 13px !important; margin-top: 5px !important; margin-bottom: 10px !important; }
     
     /* Factions specific stacking */
    .faction-layout { flex-direction: column !important; gap: 20px !important; height: auto !important; }
    .faction-nav { border-right: 0 !important; border-bottom: 1px solid #444 !important; padding-right: 0 !important; padding-top: 0 !important; flex-basis: auto !important; overflow: visible !important; } 
    .faction-nav ul { display: flex !important; justify-content: center !important; flex-wrap: wrap !important; gap: 10px !important; }
    .faction-nav .faction-link { font-size: 16px !important; border-left: 0 !important; border-bottom: 3px solid transparent !important; padding: 10px !important; border-radius: 4px !important; }
    .faction-nav .faction-link.active { border-bottom-color: #d4aa00 !important; border-left-color: transparent !important; background: rgba(212, 170, 0, 0.08) !important; }
      .faction-content { height: auto !important; overflow: visible !important;} 
     
     /* Mobile Blog Overlay */
    .blog-content h1 { font-size: 32px !important; }
    #blog-overlay { padding: 70px 20px 40px 20px !important; height: 100% !important; }
       #blog-overlay .featured-image { max-height: 250px !important; object-fit: cover !important;} 
    .blog-close { top: 20px !important; left: 20px !important; right: auto !important; }
}
#blog-dynamic-content button {
    font-family: 'Cinzel', serif;
    background: rgba(255,255,255,0.05);
    border: 1px solid #444;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    transition: all 300ms;
}
#blog-dynamic-content button:hover {
    background: rgba(255,255,255,0.1);
}
.featured-news .featured-image {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    max-height: 280px;
    object-fit: cover;
    object-position: center 20%;  /* shifts crop downward */
    border-radius: 10px;
    margin: 25px auto 20px auto;  /* spacing below title */
    background-color: #000;
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
}
/* ===========================================================
   BLOG OVERLAY IMAGE — FULL FRAME FILLED STYLE
=========================================================== */
#blog-overlay .featured-image {
    display: block !important;
    width: 100%;
    max-width: 750px;
    height: 450px; /* Frame height — adjust as needed */

    object-fit: cover;          /* ✅ fills the frame fully */
    object-position: center top;
    border-radius: 30px;
    margin: 40px auto;
    background-color: #000;

    box-shadow: 0 0 30px rgba(0,0,0,0.7),
    0 0 20px rgba(212,170,0,0.15);
    border: 1px solid rgba(212,170,0,0.25);
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Hover glow */
#blog-overlay .featured-image:hover {
    transform: scale(1.02);
    box-shadow: 0 0 40px rgba(0,0,0,0.8),
    0 0 25px rgba(212,170,0,0.25);
}

/* ✅ Hide everything if no image */
#blog-overlay .featured-image[style*="display: none"] {
    margin: 0 !important;
    height: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* Prevent users from dragging or selecting images */
img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}