:root {
            --dark-bg: #1A1A1A;
            --olive-green: #4A5D45;
            --faded-gold: #D9B47E;
            --blood-red: #990000;
            --light-text: #E0E0E0;
        }

        body {
            background-color: var(--dark-bg);
            color: var(--light-text);
            font-family: 'Special Elite', cursive;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        h1, h2, h3, .navbar-brand {
            font-family: 'Stardos Stencil', serif;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--faded-gold);
        }

        /* Header container */
        .header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 24px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
        }

        /* Logo wrapper */
        .header-logo {
            display: flex;
            align-items: center;
            height: 96px; /* adjust based on your logo */
        }

        /* Logo image */
        .header-logo img {
            height: 100%;
            width: auto;
            display: block;
        }

        /* Navigation (optional) */
        .header-nav {
            display: flex;
            gap: 32px;
        }

        .header-nav a {
            font-family: 'Roboto Condensed', sans-serif;
            font-size: 16px;
            text-transform: uppercase;
            color: #fff;
            text-decoration: none;
            letter-spacing: 0.05em;
        }

        /* Mobile adjustments */
        @media (max-width: 768px) {
            .header {
                padding: 16px 20px;
            }

            .header-logo {
                height: 44px;
            }

            .header-nav {
                display: none; /* or convert to hamburger menu */
            }
        }

        /* Navigointi */
        .navbar {
            background-color: rgba(26, 26, 26, 0.95) !important;
            border-bottom: 2px solid var(--olive-green);
        }

        .nav-link { color: var(--light-text) !important; transition: 0.3s; }
        .nav-link:hover { color: var(--faded-gold) !important; }

        /* Hero-osio */
        .hero-section {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(26, 26, 26, 1)), 
                        url('https://trenchrun.solaware.games/Assets/Images/Cover_landscape.png');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            border-bottom: 5px solid var(--olive-green);
        }

        .hero-title { font-size: 4.5rem; text-shadow: 3px 3px 10px rgba(0,0,0,0.8); }

        /* Tarina-osio */
        .story-section {
            background-color: #111;
            border-bottom: 2px solid var(--olive-green);
            position: relative;
        }
        .story-section::before {
            content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('https://www.transparenttextures.com/patterns/aged-paper.png');
            opacity: 0.05;
        }
        .story-text { font-size: 1.2rem; line-height: 1.8; color: #bbb; max-width: 800px; margin: 0 auto; text-align: justify; }
        .story-highlight { color: var(--faded-gold); font-weight: bold; }

        /* Painikkeet */
        .btn-ww1 {
            font-family: 'Roboto Condensed', sans-serif;
            font-weight: 700;
            background-color: var(--blood-red);
            color: white;
            padding: 15px 40px;
            border: 2px solid transparent;
            text-transform: uppercase;
            transition: 0.3s;
        }
        .btn-ww1:hover { border-color: var(--faded-gold); color: var(--faded-gold); background: transparent; }

        /* Ominaisuudet */
        .feature-card {
            background: rgba(74, 93, 69, 0.1);
            border: 1px solid var(--olive-green);
            padding: 30px;
            transition: 0.3s;
            height: 100%;
        }
        .feature-card:hover { transform: translateY(-10px); border-color: var(--faded-gold); }
        .feature-icon { font-size: 2.5rem; color: var(--faded-gold); margin-bottom: 15px; }

        /* Karuselli */
        .carousel-item img { height: 500px; object-fit: cover; border: 2px solid var(--olive-green); }

        /* "No-Man's-Land" Roadmap */
        .roadmap-container {
            position: relative;
            padding: 80px 0;
        }

        /* Tehostettu Piikkilanka-aita pystyjanaksi */
        .roadmap-line {
            position: absolute;
            left: 50%;
            width: 6px;
            height: 100%;
            /* Toistuva piikkilanka- ja metallitanko-kuvio */
            background: repeating-linear-gradient(
                0deg,
                #444 0px,
                #444 20px,
                #222 21px,
                #D9B47E 23px, /* Piikki */
                #222 25px
            );
            transform: translateX(-50%);
            box-shadow: 0 0 15px rgba(0,0,0,0.7);
            z-index: 1;
        }

        /* "Raunioitunut Betonibunkkeri" -tyylinen sisältölaatikko */
        .roadmap-content {
            width: 44%;
            padding: 30px;
            background: #2a2a2a; /* Betonin harmaa */
            border: 5px solid #3d3d3d; /* Paksu betonireunus */
            position: relative;
            box-shadow: 15px 15px 0px rgba(0,0,0,0.4); /* Syvyys */
            border-radius: 2px;
            transition: 0.3s ease;
            z-index: 2;
        }

        /* Bunkkeri-efektit: halkeamat, ruoste ja sammal */
        .roadmap-content::after {
            content: "";
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            /* Ruostepilkut ja halkeamat */
            background-image: 
                radial-gradient(circle at 10% 10%, rgba(139, 69, 19, 0.15) 0%, transparent 10%),
                radial-gradient(circle at 90% 80%, rgba(139, 69, 19, 0.1) 0%, transparent 15%),
                linear-gradient(45deg, transparent 48%, #1a1a1a 50%, transparent 52%), /* Halkeama 1 */
                linear-gradient(-30deg, transparent 40%, #1a1a1a 42%, transparent 44%); /* Halkeama 2 */
            background-size: 100% 100%, 100% 100%, 50px 50px, 60px 60px;
            background-repeat: no-repeat, no-repeat, repeat, repeat;
            opacity: 0.7;
            z-index: -1;
        }

        /* Ruosteiset kulmat */
        .roadmap-content {
            border-color: #3d3d3d #2d2d2d #2d2d2d #3d3d3d; /* Valo ja varjo betonissa */
        }
        .roadmap-content::before {
            content: "";
            position: absolute;
            bottom: -5px; right: -5px; width: 20px; height: 20px;
            background: #8B4513; /* Ruoste */
            clip-path: polygon(100% 0, 100% 100%, 0 100%);
        }

        /* Hiekkasäkki-efekti laatikon päälle */
        .roadmap-item:nth-child(odd) .roadmap-content::after {
            border-top: 15px solid #5d5445; /* Hiekkasäkit vasemmalle */
            border-radius: 8px 8px 0 0;
        }
        .roadmap-item:nth-child(even) .roadmap-content::after {
            border-top: 15px solid #5d5445; /* Hiekkasäkit oikealle */
            border-radius: 8px 8px 0 0;
        }

        /* Vaaran merkit aitaan */
        .roadmap-dot {
            position: absolute;
            left: 50%;
            width: 35px;
            height: 35px;
            background: var(--blood-red);
            border: 4px solid var(--faded-gold);
            transform: translateX(-50%) rotate(45deg);
            z-index: 3;
            box-shadow: 0 0 15px rgba(153,0,0,0.6);
        }

        /* Asettelu: vuorotellaan bunkkereita molemmin puolin */
        .roadmap-item:nth-child(even) .roadmap-content {
            margin-left: auto;
            border-color: #2d2d2d #3d3d3d #3d3d3d #2d2d2d; /* Käänteinen valo */
        }

        /* Tekstin säätö */
        .roadmap-content h4 {
            color: var(--faded-gold);
            border-bottom: 2px solid var(--olive-green);
            padding-bottom: 10px;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }


        /* "Pöydälle heitetyt valokuvat" Galleria */
        .media-gallery-section {
            background-color: #1a1a1a;
            background-image: url('https://www.transparenttextures.com/patterns/dark-wood.png'); /* Tumma puupinta taustaksi */
            padding: 80px 0;
            border-top: 2px solid var(--olive-green);
            border-bottom: 2px solid var(--olive-green);
            position: relative;
            overflow: hidden;
        }

        /* Yksittäisen valokuvan kehys */
        .old-photo-frame {
            background-color: white;
            padding: 15px 15px 40px 15px; /* Alareunassa enemmän tilaa tekstille */
            box-shadow: 10px 10px 30px rgba(0,0,0,0.5); /* Varjo luo syvyyttä */
            border-radius: 4px; /* Hieman pyöristetyt kulmat */
            display: inline-block;
            max-width: 100%;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            position: relative;
            z-index: 1; /* Perustaso */
        }

        /* Kuva kehyksen sisällä */
        .old-photo-frame img {
            border-radius: 2px;
            max-width: 100%;
            height: auto;
            /* Sepia-efekti ja kontrasti tuovat vanhan fiiliksen */
            filter: sepia(0.3) contrast(1.1);
        }

        /* Kuvateksti (kuten käsin kirjoitettu) */
        .photo-caption {
            color: #333;
            font-family: 'Special Elite', cursive; /* Kirjoituskonefontti */
            padding-top: 15px;
            font-size: 1rem;
            text-align: center;
        }

        /* Hover-efekti: kuva nousee pinnasta */
        .old-photo-frame:hover {
            transform: scale(1.05) rotate(0deg) !important; /* Suoristuu ja nousee */
            box-shadow: 20px 20px 50px rgba(0,0,0,0.7);
            z-index: 10; /* Nousee muiden päälle */
        }

        /* Satunnainen kallistus ja z-index (nth-child) */
        /* Ensimmäinen kuva: kallellaan vasemmalle */
        .media-gallery-section .col-md-4:nth-child(1) .old-photo-frame {
            transform: rotate(-3deg);
            z-index: 1;
        }

        /* Toinen kuva: kallellaan oikealle, hieman ylempänä */
        .media-gallery-section .col-md-4:nth-child(2) .old-photo-frame {
            transform: rotate(2deg) translateY(-10px);
            z-index: 3;
        }

        /* Kolmas kuva: kallellaan vasemmalle, vielä ylempänä */
        .media-gallery-section .col-md-4:nth-child(3) .old-photo-frame {
            transform: rotate(-4deg) translateY(-20px);
            z-index: 5;
        }

        /* Neljäs kuva: jne. */
        .media-gallery-section .col-md-4:nth-child(4) .old-photo-frame {
            transform: rotate(3deg) translateY(-5px);
            z-index: 2;
        }

        .media-gallery-section .col-md-4:nth-child(5) .old-photo-frame {
            transform: rotate(-2deg);
            z-index: 4;
        }

        .media-gallery-section .col-md-4:nth-child(6) .old-photo-frame {
            transform: rotate(4deg) translateY(-15px);
            z-index: 6;
        }

        /* Pöytäalusta */
        .photo-table {
            position: relative;
            height: 600px; /* Säädä korkeutta tarvittaessa */
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: url('https://www.transparenttextures.com/patterns/dark-wood.png');
            border: 10px solid #111;
            overflow: hidden;
        }

        /* Valokuvan perustyyli */
        .stacked-photo {
            position: absolute;
            background-color: white;
            padding: 15px 15px 45px 15px;
            box-shadow: 5px 5px 20px rgba(0,0,0,0.5);
            border-radius: 2px;
            width: 350px; /* Kiinteä leveys pinolle */
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            opacity: 0;
            transform: scale(1.5) translateY(-200px) rotate(20deg); /* Aloituspiste (ilmasta) */
            pointer-events: none;
        }

        /* Aktiivinen kuva pöydällä */
        .stacked-photo.on-table {
            opacity: 1;
            pointer-events: auto;
        }

        .stacked-photo img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            filter: sepia(0.3) contrast(1.1);
            border: 1px solid #ddd;
        }

        .photo-caption {
            font-family: 'Special Elite', cursive;
            color: #333;
            text-align: center;
            padding-top: 15px;
            font-size: 1.1rem;
        }

        /* Ohjaimet */
        .gallery-controls {
            margin-top: 20px;
            z-index: 100;
        }

        /* FAQ */
        .accordion-item { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--olive-green); margin-bottom: 5px; }
        .accordion-button { background: transparent; color: var(--faded-gold); font-family: 'Volkhov', serif; }
        .accordion-button:not(.collapsed) { background: var(--olive-green); color: white; }

        /* Uutiskirje */
        .newsletter-section {
            background: linear-gradient(rgba(26, 26, 26, 0.9), rgba(26, 26, 26, 0.9)), 
                        url('https://lh3.googleusercontent.com/jP9BpKII5nhCzbUpo1ASvjc8Snem_Z_HwUgS1oVbl524YWTk3z767zo1fim-Kw-JpcXqXBGcoI46K4fpdK7_-hU5tJxLZ8aYbm56V-RaFmcX3FZRYWpT=s1600');
            background-attachment: fixed; background-size: cover; padding: 80px 0;
        }
        .form-control-ww1 { background: rgba(0, 0, 0, 0.5); border: 1px solid var(--olive-green); color: white; border-radius: 0; }

        /* Lightbox (Suurennos) tyylit */
        .photo-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9); /* Tumma tausta */
            display: none; /* Piilossa oletuksena */
            justify-content: center;
            align-items: center;
            z-index: 2000;
            cursor: zoom-out;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .photo-overlay.active {
            display: flex;
            opacity: 1;
        }

        .expanded-photo {
            max-width: 85%;
            max-height: 85%;
            border: 15px solid white; /* Valkoiset kehykset säilyvät */
            box-shadow: 0 0 50px rgba(0,0,0,0.8);
            transform: scale(0.8);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .photo-overlay.active .expanded-photo {
            transform: scale(1);
        }

        /* Lisätään kursori osoittamaan, että kuvaa voi klikata pöydällä */
        .stacked-photo {
            cursor: zoom-in;
        }

        @media (max-width: 992px) {
            .roadmap-content { width: 40%; }
        }

        @media (max-width: 768px) {
            .hero-title { font-size: 2.5rem; }
            .roadmap-line { left: 20px; }
            .roadmap-dot { left: 20px; }
            .roadmap-content { width: 85%; margin-left: 50px !important; }
        }