/* style.css */
body {
    font-size: 1.0em;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

header {
    background-image: url('../media/images/header_banner.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    text-align: center;
    padding: 1em 0;
    width: 100%;
    box-sizing: border-box; /* Ensure padding doesn't increase width */
}

.banner {
    display: flex;
    justify-content: center;
    margin-bottom: 1em;
}

.banner img {
    width: 120px;
    height: 80px;
    object-fit: contain;
}

header .banner img {
    width: 99px; /* Reduced from 120px */
    height: 66px; /* Reduced from 80px, maintaining ~3:2 aspect ratio */
    max-width: 100%; /* Ensure responsiveness */
    object-fit: contain;
}

nav a {
    color: white;
    margin: 0 0.5em; /* Was 0 1em, now ~4.8px per side */
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

nav a.active {
    color: #B0FFFF; /* Very light cyan */
}

main {
    width: 100%;
    margin: 0;
    padding: 1em 0 3em 0;
    background-image: url('../media/images/stars2.webp');
    background-size: 100% auto; /* Full width, natural height */
    background-position: center top;
    background-repeat: repeat-y; /* Tile vertically */
    background-color: #000;
    min-height: 100vh;
    text-align: center;
}

/* Shop page styles */
.shop-banner {
    background-image: url('../media/images/stars2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    text-align: center;
    padding: 1em 0;
    width: 100%;
    box-sizing: border-box;
}

.shop-banner h1 {
    margin: 0;
    font-size: 1.2em;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.gear-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 800px;
    margin: 2em auto;
}

.gear-image {
    width: 100%;
    height: 200px; /* Fixed height for square images */
    object-fit: cover; /* Ensure square cropping */
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.gear-placeholder {
    width: 100%;
    height: 250px;
    background-color: #333;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    font-size: 1em;
    text-align: center;
}

.shop-button-container {
    text-align: center;
    margin: 2em 0;
}

.shop-button {
    background-color: #333;
    color: white;
    padding: 0.8em 1.5em;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    font-size: 1.2em;
    display: inline-block;
    transition: background-color 0.2s;
}

.shop-button:hover {
    background-color: #555;
}

@media (max-width: 600px) {
    .shop-banner h1 {
        font-size: 1.0em;
    }

    .gear-grid {
        grid-template-columns: 1fr; /* Stack images on mobile */
        gap: 15px;
        margin: 1em auto;
    }

    .gear-image, .gear-placeholder {
        height: 200px; /* Smaller square images on mobile */
    }

    .shop-button {
        font-size: 1em;
        padding: 0.6em 1.2em;
    }
}

.copy-btn {
    background-color: #555;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.3em;
    margin-left: 0.5em;
    cursor: pointer;
    font-size: 0.9em;
    vertical-align: middle;
    width: 1.5em;
    height: 1.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.copy-btn:hover {
    background-color: #777;
}

.copy-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.copy-btn {
    background-color: #555;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.3em;
    margin-left: 0.5em;
    cursor: pointer;
    font-size: 0.9em;
    vertical-align: middle;
    width: 1.5em;
    height: 1.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Button is the positioning context */
}

.copy-popup {
    position: absolute;
    top: -20px; /* Half a line above, using pixels for precision */
    left: 20px; /* Just right of the button */
    background-color: #333;
    color: white;
    padding: 0.3em 0.6em;
    border-radius: 4px;
    font-family: "Avantgarde", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.8em;
    opacity: 0.9;
    z-index: 10;
    white-space: nowrap; /* Prevent text wrapping */
}
.content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1em;
}

.game-def {
    color: white !important; /* Ensure text is white on all devices */
}
#contact-content {
    color: white !important; /* Ensure contact page text is white */
}

/* style.css (only showing updated sections) */
.code-block {
    background-color: rgba(36, 36, 36, 0.6);
    color: #D4D4D4;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.05em; /* Restored original size for desktop */
    line-height: 1.5;
    width: 450px;
    margin: .11em auto;
    padding: 1em;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    text-align: left;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .shop-banner h1 {
        font-size: 1.0em;
    }

    .gear-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin: 1em auto;
    }

    .gear-image, .gear-placeholder {
        height: 200px;
    }

    .shop-button {
        font-size: 1em;
        padding: 0.6em 1.2em;
    }

    .code-block {
        font-size: 0.7em; /* 20% smaller (1.05em × 0.8) for mobile */
         margin: 0.5em auto;
    }
}
.code-block-container {
    display: flex;
    align-items: flex-start; /* Align tops of code block and image */
    justify-content: center; /* Center horizontally */
    width: 700px; /* Fixed width to match content-wrapper */
    margin: .25em auto;
    gap: 0; /* Remove gap for precise alignment */
}

.profile-pic {
    width: 200px;
    height: 200px;
    object-fit: cover; /* Ensure square cropping */
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    margin-left: 1.5em; /* Small margin to separate from code block */
    margin-top: 1em; /* Lower images to align with code block content */
}

@media (max-width: 450px) {
    .code-block-container {
        flex-direction: column; /* Stack image below code block on mobile */
        align-items: center;
        width: 100%; /* Full width on mobile */
    }

    .code-block {
        width: 100%; /* Full width on mobile, up to max-width */
        max-width: 450px; /* Maintain max width */
    }

    .profile-pic {
        margin-left: 0; /* Remove left margin */
        margin-top: 1em; /* Consistent spacing below code block */
    }
}

.code-block pre {
    margin: 0;
    white-space: pre-wrap; /* Wrap long lines */
}

/* VS Code-inspired syntax highlighting */
.code-block .keyword {
    color: #C792EA; /* Purple for keywords (e.g., def, if) */
}

.code-block .string {
    color: #F1FA8C; /* Yellow for strings */
}

.code-block .comment {
    color: #6A9955; /* Green for comments */
}

.code-block .function {
    color: #61D6D6; /* Cyan for function names */
}

.code-block .number {
    color: #B5CEA8; /* Light green for numbers */
}

.code-block .operator {
    color: #D4D4D4; /* White for operators (+, =) */
}

.banner {
    display: flex;
    justify-content: center;
    margin-bottom: 1em;
}

.banner img {
    width: 100%;
    max-width: 150px;
    height: auto;
    object-fit: contain;
}

nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.nav-links {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex: 0; /* Center links in available space */
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content vertically */
    max-width: 800px;
    margin: 0 auto;
}

.social-icons {
    display: flex;
    gap: 25px;
    justify-content: center; /* Center logos horizontally */
    margin-top: 0.5em;
}

.social-icon {
    width: 30px;
    height: auto;
    object-fit: contain;
    transition: transform 0.2s;
    background: transparent;
    filter: none;
    -webkit-filter: none;
    image-rendering: -webkit-optimize-contrast;
    forced-color-adjust: none;
}

.social-icon:hover {
    transform: scale(1.1);
}

footer p {
    margin: 0; /* Remove default margin for alignment */
    padding-top: 0.5em; /* Add space above text */
}

.social-icon:hover {
    transform: scale(1.1);
}

.x-icon {
    background-image: url('../media/images/x_logo.webp');
    margin-right: auto; /* Push X logo to left */
}

.instagram-icon {
    background-image: url('../media/images/instagram_logo.webp');
    margin-left: auto; /* Push Instagram logo to right */
}

.game-card {
    background: white;
    padding: 1em;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    margin: 1em 0;
}

form {
    background: white;
    padding: 1em;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

label, input, textarea {
    display: block;
    margin: 0.5em 0;
    width: 100%;
}

input, textarea {
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    background-color: #333;
    color: white;
    padding: 0.5em 1em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #555;
}

footer {
    text-align: center;
    padding: 0.05em;
    background-color: #090909;
    color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 0.8em;
}
/* Updated styles for header and dropdown */
.header-container {
    display: flex;
    justify-content: center;
    margin: 1em 0;
    text-align: center; /* Ensure inline elements center */
}


.header-text {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 1em;
    display: inline-flex;
    align-items: center;
}


.game-selector-wrapper {
    background-image: url('../media/images/rinkiCircle350x320.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 140px;
    height: 128px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: .1em auto;
}

.game-selector {
    display: inline-block;
}

.game-option-image {
    width: 100px;
    height: 38px;
    object-fit: contain;
    cursor: pointer;
}

.game-selector select {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100px;
    height: 38px;
    appearance: none; /* Remove default dropdown arrow */
    padding: 0;
    text-align: center;
}

.video-container {
    display: flex;
    justify-content: center;
    margin: 1em auto; /* Center with auto margins */
    width: 100%;
    max-width: 360px;
    max-height: 640px;
}

.video-wrapper {
    position: relative;
    display: inline-block;
}

.video-background-wrapper {
    background-image: url('../media/images/video_bg.webp'); /* Replace with your image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0em 0; /* Optional spacing */
    display: flex;
    justify-content: center;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-button::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 40px solid white;
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent;
    margin-left: 10px;
}

.play-button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

#game-video {
    width: 360px; /* 9:16 aspect ratio, adjust as needed */
    height: 640px;
    border-radius: 1px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    max-width: 100%;
}

.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 700px; /* Narrower grid */
    margin: 1em auto; /* Center grid */}

.screenshot {
    width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.platforms {
    margin: 2em 0;
    text-align: center;
}

.platform-images {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.platform-icon {
    width: 300px;
    height: 200px;
    object-fit: contain;
}

/* Responsive design */
@media (max-width: 600px) {
    body {
        font-size: 1.2em; /* 20%+ on mobile */
    }
    /* #game-video {
        width: 280px;
        height: 498px;
    } */

    .screenshot-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */
    }

    .header-container {
        flex-direction: column;
        align-items: center;
    }

    .header-text {
        flex-direction: column;
        align-items: center;
    }

    .game-selector {
        margin-left: 0;
        margin-top: 0.5em;
    }
}