/* Reset default styles */
* { /* Corrected: Use * selector */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* General styles */
body {
    /* MODIFIED: Set default font to Arial */
    font-family: Arial, sans-serif;
    background-color: #1a1a1a;
    color: #f0f0f0;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; /* Added to prevent horizontal scroll */
}

/* Ensure content pushes footer down */
/* section { flex-grow: 1; } /* Example if you wrap main content */

/* Specific section adjustments */
#home.hero {
    flex-grow: 0; /* Hero should not grow excessively */
}

a {
    text-decoration: none;
    color: inherit;
}

/* Updated general link styles */
/* MODIFIED: Added .footer-nav a */
/* MODIFIED: Removed .game-icon-grid a from this rule */
/* MODIFIED: Removed #contact a */
/* MODIFIED: Added .about-contact-section a */
footer a, .cookie-link, .cookie-link-modal, .contact-info a, .game-release-info a, .footer-nav a, .about-contact-section a {
    color: #2a9d8f; /* Teal color for links */
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
/* MODIFIED: Added .footer-nav a:hover */
/* MODIFIED: Removed .game-icon-grid a:hover from this rule */
/* MODIFIED: Removed #contact a:hover */
/* MODIFIED: Added .about-contact-section a:hover */
footer a:hover, .cookie-link:hover, .cookie-link-modal:hover, .contact-info a:hover, .game-release-info a:hover, .footer-nav a:hover, .about-contact-section a:hover {
    color: #e63946; /* Red color on hover */
}

/* Specific hover for footer social icons (if different needed) */
.footer-social a:hover {
    color: #e63946; /* Red hover for social icons */
}
/* Specific hover for footer nav links */
.footer-nav a:hover {
    color: #ffffff; /* Make nav links white on hover */
}

.game-release-info a:hover {
    text-decoration: underline;
}
/* MODIFIED: Removed .download-link:hover specific rule */
/* .download-link:hover {
    background-color: #333;
    border-color: #555;
    color: #fff;
} */

/* MODIFIED: Changed selector from a:hover to span:hover */
.game-icon-grid span:hover .game-icon {
    transform: scale(1.1);
    border-color: #498ccc; /* MODIFIED: Changed hover border color to new hover blue */
}

h1, h2, h3 {
    margin-bottom: 15px;
    color: #ffffff; /* White headings */
}

/* MODIFIED: Apply Arial Black font to specific titles */
/* ADDED: #privacy-policy-content h1, #privacy-policy-content h2, .cookie-modal-content h3, #privacy-policy-content h3 */
/* ADDED: #about-us h2 */
/* ADDED: .about-contact-section h3 */
/* ADDED: .stat-label */
/* REMOVED: #contact-page h2 */
/* ADDED: .games-page-card h3 */
.hero h1,
#coming-soon h2,
#showcase-games h2,
#view-all-games h2,
#about-us h2, /* ADDED: Style for About Us heading */
.coming-soon-details h3,
.showcase-game-card h3,
.game-card h3, /* Style for original games page cards */
.games-page-card h3, /* ADDED: Style for new slider game cards */
.game-details-section h1,
.cookie-modal h2, /* Targets main modal title */
.cookie-modal-content h3, /* ADDED: Targets subheadings inside modal */
#privacy-policy-content h1, /* Targets h1 on dedicated privacy page */
#privacy-policy-content h2, /* Targets h2 on dedicated privacy page */
#privacy-policy-content h3, /* ADDED: Targets h3 on dedicated privacy page */
.about-contact-section h3, /* ADDED: Style for Contact Us heading in About page */
.stat-label /* ADDED: Style for Statistic Labels */
{
    font-family: 'Arial Black', Arial, sans-serif; /* Apply Arial Black font */
}

.page-section {
    padding: 60px 20px;
    text-align: center;
    max-width: 1100px; /* Increased max-width slightly to better accommodate side-by-side layout */
    margin: 0 auto;
    width: 100%;
}

/* === ADDED: Text content sections (like About Us, Game Details Description) === */
.text-content-section {
    /* Styles specific to sections primarily containing text */
}
/* === MODIFIED: About Us Heading Style === */
#about-us h2 {
    font-size: 4em; /* Increased font size */
    margin-bottom: 40px; /* More space below main heading */
}
.text-content-section p, .text-content-section ul {
    text-align: left; /* Align text left */
    max-width: 800px; /* Limit width of text block */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px; /* Space between paragraphs/lists */
    color: #cccccc; /* Light gray text */
}
.text-content-section ul {
    list-style-position: inside;
    padding-left: 20px;
}
.text-content-section li {
    margin-bottom: 5px;
}
/* === END ADDED: Text content sections === */

/* === REMOVED: About Us Image Style === */
/* .about-image { ... } */

/* === MODIFIED: About Us Statistics Section Styles === */
.about-stats {
    display: flex;
    justify-content: space-around; /* Distribute items evenly */
    align-items: flex-start; /* Align items to top for consistent label alignment */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 30px; /* Space between items */
    margin-top: 40px; /* ADDED: Space after paragraphs */
    margin-bottom: 40px; /* Space below stats section */
    padding: 20px 0; /* Vertical padding */
    /* border-top: 1px solid #444; /* REMOVED/Ensure removed */
    /* border-bottom: 1px solid #444; /* REMOVED */
    max-width: 800px; /* Match text width */
    margin-left: auto;
    margin-right: auto;
}

.stat-item {
    text-align: center;
    min-width: 150px; /* Minimum width for each item */
    flex: 1; /* Allow items to grow */
}

.stat-number {
    display: block; /* Number on its own line */
    font-size: 3em; /* Large number */
    font-weight: bold;
    color: #498ccc; /* Use hover blue color for numbers */
    line-height: 1.1;
    margin-bottom: 5px;
}

.stat-label {
    display: block; /* Label below number */
    font-size: 1.1em; /* MODIFIED: Increased font size */
    color: #cccccc; /* Light gray text */
    /* Font family applied via group selector */
}
/* === END MODIFIED: About Us Statistics Section Styles === */

/* === MODIFIED: About Us Contact Section Styles === */
.about-contact-section {
    background-color: #2a2a2a; /* Darker background for contrast */
    border: 1px solid #444;
    border-radius: 8px;
    padding: 30px;
    margin-top: 40px; /* Space above the contact section */
    max-width: 800px; /* Match text width */
    margin-left: auto;
    margin-right: auto;
    text-align: left; /* Align content left */
}

.about-contact-section h3 {
    margin-top: 0;
    margin-bottom: 25px; /* Space below heading */
    text-align: center; /* Center the "Contact Us" heading */
    color: #ffffff;
    border-bottom: 1px solid #555; /* Separator line */
    padding-bottom: 10px;
    font-size: 1.8em; /* ADDED: Slightly larger font size */
    /* Font family inherited via group selector */
}

.about-contact-section p {
    display: flex;
    align-items: center;
    gap: 12px; /* Space between icon and text */
    margin-bottom: 15px; /* Space between contact items */
    font-size: 1.0em;
    color: #cccccc;
    max-width: 100%; /* Ensure p takes full width */
    margin-left: 0; /* Reset margin */
    margin-right: 0; /* Reset margin */
}

.about-contact-section p:last-child {
    margin-bottom: 0; /* No margin below the last item */
}

/* MODIFIED: Changed icon color TO MATCH NUMBERS */
.about-contact-section i {
    color: #498ccc; /* Changed to number/hover blue */
    font-size: 1.4em;
    width: 25px; /* Fixed width for alignment */
    text-align: center;
}

/* MODIFIED: Apply Arial Black to contact text spans */
.about-contact-section p span,
.about-contact-section a span {
    font-family: 'Arial Black', Arial, sans-serif; /* Apply Arial Black */
    color: #cccccc; /* Ensure text color is consistent */
    transition: color 0.3s ease;
}

/* MODIFIED: Change hover color to nav hover blue */
.about-contact-section a:hover span {
    color: #498ccc; /* Change text color to nav hover blue */
}
/* === END MODIFIED: About Us Contact Section Styles === */

/* === Hero Section === */
.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url('images/hero-image.png'); /* Ensure image path is correct */
    background-size: cover;
    background-position: center center;
    color: white;
    text-align: center;
    padding: 100px 20px 80px 20px; /* Adjust padding as needed */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative; /* Needed for absolute positioning of children */
    min-height: 65vh; /* Minimum height */
}

/* === MODIFIED: Override Hero styles ONLY for About Us & Privacy Policy page === */
/* REMOVED: #games-page-body .hero from this rule */
#about-page-body .hero,
#privacy-page-body .hero {
    background-image: none; /* Remove background image */
    background-color: #1a1a1a; /* Set background to body color */
    min-height: auto; /* Remove minimum height */
    padding: 80px 20px 20px 20px; /* Adjust padding - more top for logo/nav */
    justify-content: flex-start; /* Align content (empty div) to top */
}
/* === END MODIFIED: Override Hero styles === */

/* Logo Container (Top Left) */
.logo-container {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10; /* Ensure logo is above background */
}
.logo-container a {
    line-height: 0; /* Prevent extra space below image */
}
.logo {
    height: 146px; /* Adjust logo size */
    width: auto;
    display: block;
}

/* --- Desktop Navigation --- */
.desktop-nav-container {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10; /* Ensure nav is above background */
    display: flex; /* Use flexbox */
    align-items: flex-start; /* Align items to the top */
}

.desktop-nav-list {
    list-style-type: none;
    /* MODIFIED: Removed default background color */
    /* background-color: rgba(0, 0, 0, 0.3); */
    background-color: transparent; /* Make transparent by default */
    padding: 5px; /* Small padding around links */
    margin: 0;
    border-radius: 4px;
    display: flex; /* Arrange list items horizontally */
    flex-direction: row;
}

/* REMOVED: Override for Desktop Nav Background on Privacy Policy page (now default) */
/* #privacy-page-body .desktop-nav-list {
    background-color: transparent;
} */

.desktop-nav-list li {
    margin: 0 8px; /* Spacing between nav items */
}

.desktop-nav-list li a {
    color: #fff;
    font-weight: bold;
    padding: 5px 8px;
    transition: color 0.3s ease, background-color 0.2s ease;
    border-radius: 4px;
    display: block;
    font-size: 1.1em; /* Adjust font size */
}

/* MODIFIED: General Desktop Nav Link Hover */
.desktop-nav-list li a:hover {
    /* color: #e63946; /* REMOVED Red hover color */
    color: #498ccc; /* CHANGED to Button hover blue by default */
    background-color: transparent; /* Keep background transparent on hover */
}

/* REMOVED: Override for Desktop Nav Link Hover on Privacy Policy page (now default) */
/* #privacy-page-body .desktop-nav-list li a:hover {
    color: #498ccc;
} */

/* --- End Desktop Navigation --- */

/* --- Hamburger Button --- */
.mobile-menu-button {
    display: none; /* Hidden by default, shown in media queries */
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1001; /* Above overlay and panel */
    background-color: #225380; /* MODIFIED: Changed default background to new button blue */
    border: none;
    padding: 8px; /* Padding inside the button */
    cursor: pointer;
    border-radius: 4px;
    width: 41px; /* Fixed width */
    height: 37px; /* Fixed height */
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}
.mobile-menu-button:hover {
    background-color: #498ccc; /* MODIFIED: Changed hover background to new hover blue */
}

.hamburger-line {
    display: block;
    width: 25px; /* Width of lines */
    height: 3px; /* Thickness of lines */
    background-color: #ffffff; /* Color of lines */
    margin: 5px auto; /* Spacing between lines */
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center; /* Rotate around center */
}
/* Hamburger animation when active */
.mobile-menu-button.is-active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg); /* Move down and rotate */
}
.mobile-menu-button.is-active .hamburger-line:nth-child(2) {
    opacity: 0; /* Fade out middle line */
}
.mobile-menu-button.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg); /* Move up and rotate */
}
/* --- End Hamburger Button --- */

/* --- Mobile Navigation Panel --- */
.mobile-nav-panel {
    position: fixed; /* Fixed position */
    top: 0;
    left: 0;
    width: 80%; /* Panel width */
    max-width: 350px; /* Maximum width */
    height: 100vh; /* Full height */
    background-color: #3a3a3a; /* Dark gray background */
    padding: 80px 0 20px 0; /* Top padding to avoid overlap with potential fixed header/button */
    margin: 0;
    box-shadow: 2px 0 5px rgba(0,0,0,0.5); /* Shadow on the right */
    z-index: 1000; /* Below hamburger, above content */
    overflow-y: auto; /* Allow scrolling if content exceeds height */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center list horizontally */
    transform: translateX(-100%); /* Start off-screen */
    opacity: 0; /* Start invisible */
    visibility: hidden; /* Start hidden */
    pointer-events: none; /* Prevent interaction when hidden */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0s 0.3s linear; /* Smooth transition */
}
.mobile-nav-panel.panel-active {
    transform: translateX(0); /* Slide in */
    opacity: 1; /* Fade in */
    visibility: visible; /* Make visible */
    pointer-events: auto; /* Allow interaction */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Transition timing */
}
.mobile-nav-panel ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 90%; /* Width of the list inside the panel */
}
.mobile-nav-panel li {
    width: 100%;
    margin: 0 0 15px 0; /* Spacing below each list item */
}
.mobile-nav-panel li a {
    display: block; /* Make links take full width */
    width: 100%;
    padding: 12px 20px; /* Padding inside links */
    color: #ffffff; /* White text */
    font-size: 1.2em; /* Font size */
    text-decoration: none;
    border-bottom: 1px solid #555; /* Separator line */
    text-align: left; /* Align text left */
    transition: background-color 0.2s ease, color 0.2s ease;
    box-sizing: border-box;
}
.mobile-nav-panel li:last-child a {
    border-bottom: none; /* Remove border from last item */
}
.mobile-nav-panel li a:hover {
    background-color: #4f4f4f; /* Slightly lighter gray on hover */
    color: #e63946; /* Red text color on hover (Keeping this as requested) */
}
/* --- End Mobile Navigation Panel --- */

/* --- Mobile Menu Overlay --- */
.menu-overlay {
    position: fixed; /* Fixed position */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    z-index: 999; /* Below panel and button, above content */
    opacity: 0; /* Start transparent */
    visibility: hidden; /* Start hidden */
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s linear; /* Fade transition */
    cursor: pointer; /* Indicate it's clickable */
}
.menu-overlay.overlay-active {
    opacity: 1; /* Fade in */
    visibility: visible; /* Make visible */
    transition: opacity 0.3s ease-in-out; /* Transition timing */
}
/* --- End Mobile Menu Overlay --- */

/* Main Hero Content (Styles for index.html) */
.hero-content {
    background-color: transparent; /* Ensure no background color interferes */
    padding: 0; /* No padding needed here */
    border-radius: 0;
    position: relative; /* Ensure content is layered correctly */
    z-index: 5; /* Above background, below nav/logo */
}
.hero h1 {
    /* Font family is now set in the general h1, h2, h3 rule */
    font-size: 4.5em; /* Large font size */
    margin-bottom: 10px;
    line-height: 1.1; /* Adjust line height */
    font-weight: bold; /* Keep bold for Arial Black */
    text-transform: uppercase; /* Uppercase text */
}

/* Styles for "FUN" on index.html */
.hero h1 .fun-text {
    color: #225380; /* MODIFIED: Changed color as requested */
    display: block; /* Put on its own line */
    margin-bottom: 5px; /* Space below */
}
/* Styles for "NEVER ENDS!" on index.html */
.hero h1 .never-ends-text {
    color: transparent; /* Make text transparent */
    -webkit-text-stroke-width: 2px; /* Outline width */
    -webkit-text-stroke-color: #ffffff; /* Outline color (white) */
    text-stroke-width: 2px; /* Standard property */
    text-stroke-color: #ffffff; /* Standard property */
    display: block; /* Put on its own line */
}

/* === ADDED: Styles for "OUR GAMES" on games.html === */
#games-page-body .hero h1 .our-text {
    color: #225380; /* Blue color */
    display: block;
    margin-bottom: 5px;
}
#games-page-body .hero h1 .games-text {
    color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #ffffff;
    text-stroke-width: 2px;
    text-stroke-color: #ffffff;
    display: block;
}
/* === END ADDED: Styles for "OUR GAMES" === */

.hero-subtitle {
    /* MODIFIED: Apply Arial Black font */
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 1.3em;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 30px;
    font-weight: normal; /* Arial Black is inherently bold, normal might look better */
    letter-spacing: 1px; /* Add some letter spacing */
}
/* === ADDED: Hide subtitle on games page === */
#games-page-body .hero-subtitle {
    display: none;
}

.cta-button {
    background-color: #225380; /* MODIFIED: Changed default background to new button blue */
    padding: 14px 30px; /* Padding */
    border-radius: 5px; /* Rounded corners */
    font-weight: bold;
    color: #fff;
    display: inline-flex; /* Use flex for icon alignment */
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    font-size: 1.1em;
    border: none; /* No border */
    cursor: pointer;
}
.cta-button:hover,
.cta-button:focus { /* Added focus state */
    background-color: #498ccc; /* MODIFIED: Changed hover/focus background to new hover blue */
    color: #fff; /* Ensure text remains white */
}
/* === ADDED: Hide CTA button on games page === */
#games-page-body .hero .cta-button {
    display: none;
}
/* === END Hero Section === */

/* Privacy Policy Title Style */
#privacy-policy-content h1 {
    font-size: 4em; /* Increased font size */
    text-align: center; /* Ensure centered */
    margin-bottom: 40px; /* More space below large title */
}

/* Games Section (original games.html - now unused, keep for reference or remove later) */
#games-page h2 {
    margin-bottom: 40px;
    color: #ffffff;
    /* Font family inherited from general h2 rule */
}
.games-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.game-card { background-color: #2a2a2a; border: 1px solid #444444; border-radius: 8px; padding: 20px; width: 250px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; }
.game-card:hover { transform: translateY(-5px); box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.game-card img { width: 100%; max-width: 200px; height: auto; border-radius: 5px; margin-bottom: 15px; align-self: center; }
.game-card h3 {
    margin-bottom: 10px;
    font-size: 1.2em;
    color: #ffffff;
    /* Font family inherited from general h3 rule */
}
.game-card p { font-size: 0.9em; color: #cccccc; margin-bottom: 15px; flex-grow: 1; }
/* Download button on games page - assuming it uses .download-btn */
.download-btn {
    display: inline-block;
    background-color: #225380; /* MODIFIED: Changed default background to new button blue */
    color: #fff;
    padding: 10px 20px;
    margin-top: 10px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    align-self: center;
}
.download-btn:hover,
.download-btn:focus { /* Added focus state */
    background-color: #498ccc; /* MODIFIED: Changed hover/focus background to new hover blue */
    color: #fff;
}

/* Contact Section (contact.html) - Styles remain but won't apply if page is unused */
#contact-page h2 {
    margin-bottom: 30px;
    color: #ffffff;
    /* Font family inherited from general h2 rule */
}
#contact-page > p { margin-bottom: 30px; color: #cccccc; font-size: 1.1em; }
.contact-info { margin-bottom: 30px; }
.contact-info p { margin-bottom: 20px; font-size: 1.1em; color: #cccccc; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.contact-info strong { color: #ffffff; margin-right: 8px; }
.contact-info i { color: #e63946; font-size: 1.4em; width: 30px; text-align: center; } /* Keeping icon color red */

/* === Coming Soon Section (Styles remain but section removed from games.html) === */
#coming-soon { background-color: #222; padding-top: 60px; padding-bottom: 60px; }
#coming-soon h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2em;
    color: #ffffff;
    /* Font family inherited from general h2 rule */
}
.coming-soon-container {
    max-width: 1100px; /* Adjusted to match page-section max-width */
    margin: 0 auto;
    padding: 0 20px;
}
.coming-soon-item {
    display: flex;
    align-items: center; /* Vertically center items in the flex row */
    gap: 40px; /* Space between image and details */
    background-color: #2a2a2a; /* Card background */
    border: 1px solid #444; /* Card border */
    border-radius: 8px; /* Rounded corners */
    padding: 30px; /* Padding inside card */
    margin-bottom: 30px; /* Space below card */
    overflow: hidden; /* Ensure content fits */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.coming-soon-item:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); }

.coming-soon-image {
    flex-basis: 45%; /* Adjust basis for image width */
    flex-shrink: 0; /* Prevent image from shrinking */
    text-align: center; /* Center image within its container */
}
.coming-soon-image img {
    max-width: 100%; /* Responsive image */
    height: auto;
    display: block;
    border-radius: 5px;
    border: 1px solid #555;
    margin: 0 auto; /* Ensure centering if basis is wider than image */
}

.coming-soon-details {
    flex-grow: 1; /* Allow details to take remaining space */
    text-align: left; /* Align container content left */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items (title, p, button) to the start */
}
.coming-soon-details h3 {
    margin-top: 0;
    margin-bottom: 15px; /* Reduced margin */
    font-size: 1.6em;
    color: #ffffff;
    text-align: center; /* Center title text */
    width: 100%; /* Ensure title takes full width for centering */
    /* Font family inherited from general h3 rule */
}
.coming-soon-details p {
    color: #cccccc;
    font-size: 0.95em;
    line-height: 1.6;
    /* max-width: 650px; Removed max-width, flex handles it */
    margin-left: 0; /* Align left */
    margin-right: 0; /* Align left */
    margin-bottom: 25px;
    text-align: justify; /* Justify text */
    width: 100%; /* Ensure p takes full width for justify */
}
/* REMOVED: .coming-soon-button styles */
/* .coming-soon-button { ... } */
/* .coming-soon-button:hover, */
/* .coming-soon-button:focus { ... } */
/* === END Coming Soon Section === */

/* === MODIFIED: Our Games Showcase Section Styles (Styles remain but section removed from games.html) === */
#showcase-games {
    background-color: #1a1a1a; /* Match body background */
    padding-top: 60px;
    padding-bottom: 40px; /* Reduced bottom padding slightly */
}

#showcase-games h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2em;
    color: #ffffff;
    /* Font family inherited from general h2 rule */
}

/* MODIFIED: Container - Adjusted max-width to match coming soon */
.showcase-games-container {
    max-width: 1100px; /* Match coming soon container width */
    margin: 0 auto;
    padding: 0 20px;
}

/* MODIFIED: Card styling to mimic coming-soon-item */
.showcase-game-card {
    display: flex; /* Use flexbox for side-by-side layout */
    flex-direction: row; /* Default direction is row */
    align-items: center; /* Vertically center items */
    gap: 40px; /* Space between image and details */
    background-color: #2a2a2a; /* Card background */
    border: 1px solid #444; /* Card border */
    border-radius: 8px; /* Rounded corners */
    padding: 30px; /* Padding inside card */
    width: 100%; /* Card takes full width of its container */
    margin-bottom: 40px; /* Space between cards */
    box-shadow: 0 2px 8px rgba(0,0,0,0.4); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover effect */
    overflow: hidden; /* Ensure content stays within rounded corners */
}

.showcase-game-card:hover {
    transform: translateY(-5px); /* Lift card on hover */
    box-shadow: 0 4px 12px rgba(0,0,0,0.5); /* Increase shadow on hover */
}

/* MODIFIED: Image styling */
.showcase-game-image {
    flex-basis: 45%; /* Match coming soon image basis */
    flex-shrink: 0; /* Prevent shrinking */
    text-align: center; /* Center image within its container */
    margin-bottom: 0; /* Remove bottom margin as gap handles spacing */
}

.showcase-game-image img {
    width: 100%; /* Make image responsive within its container */
    max-width: 100%; /* Ensure image doesn't overflow */
    height: auto;
    border-radius: 5px;
    display: block;
    margin: 0 auto; /* Center image if basis is wider */
    border: 1px solid #555; /* Subtle border on image */
}

/* MODIFIED: Details styling */
.showcase-game-details {
    flex-grow: 1; /* Allow details to take remaining space */
    text-align: left; /* Align container content left */
    display: flex; /* Use flex for internal alignment */
    flex-direction: column; /* Stack title, p, buttons vertically */
    align-items: flex-start; /* Default align items to the start (left) */
    margin-bottom: 0; /* Remove bottom margin */
    /* Removed max-width, flex handles it */
}

/* MODIFIED: Title styling (moved inside details) */
.showcase-game-card h3 {
    order: 0; /* Reset order (useful if changing layout later) */
    margin-top: 0; /* Remove potential top margin */
    margin-bottom: 15px; /* Space below title */
    font-size: 1.6em; /* Match coming soon title size */
    color: #ffffff;
    width: 100%; /* Ensure title takes full width */
    text-align: center; /* Center title text */
    /* Font family inherited from general h3 rule */
}

/* MODIFIED: Paragraph styling */
.showcase-game-details p {
    font-size: 0.95em; /* Match coming soon text size */
    color: #cccccc; /* Light gray text */
    line-height: 1.6;
    text-align: justify; /* Justify text */
    margin-bottom: 25px; /* Space below paragraph */
    width: 100%; /* Ensure p takes full width for justify */
}

/* MODIFIED: Downloads container styling */
.showcase-game-downloads {
    display: flex;
    justify-content: center; /* Center buttons within the container */
    gap: 15px; /* Reduced gap slightly */
    flex-wrap: wrap; /* Allow buttons to wrap on small screens */
    margin-top: auto; /* Push downloads to bottom of flex container */
    width: 100%; /* Take full width */
    align-self: center; /* Center the container itself */
}

/* MODIFIED: Download Link styling (minor adjustments if needed) */
.download-link {
    display: inline-flex; /* Use flex for icon alignment */
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between icon and text */
    background-color: #225380; /* MODIFIED: Changed default background to new button blue */
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 0.9em;
    font-weight: bold;
    border: none;
    text-decoration: none;
    white-space: nowrap; /* Prevent text wrapping */
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.download-link:hover,
.download-link:focus { /* Added focus state */
    background-color: #498ccc; /* MODIFIED: Changed hover/focus background to new hover blue */
    color: #fff; /* Ensure text remains white */
}

.download-link i {
    font-size: 1.2em; /* Icon size */
    margin-right: 2px; /* Tiny space adjustment */
}
/* === END MODIFIED: Our Games Showcase Section Styles === */

/* View All Games Section Styles (Styles remain but section removed from games.html) */
#view-all-games {
    background-color: #222; /* Darker background */
    padding-top: 40px; /* Reduced top padding */
    padding-bottom: 60px;
}
#view-all-games h2 {
    margin-bottom: 20px;
    /* Font family inherited from general h2 rule */
}
#view-all-games p {
    color: #cccccc;
    margin-bottom: 30px;
    max-width: 600px; /* Limit width of paragraph */
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px; /* Add horizontal padding */
}

/* Game Icon Grid Styles */
.game-icon-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px; /* MODIFICATION: Adjusted gap */
    margin-bottom: 40px;
    max-width: 900px; /* MODIFICATION: Adjusted max-width */
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px; /* Add horizontal padding */
}

/* MODIFIED: Changed selector from a to span */
.game-icon-grid span {
    display: inline-block; /* Ensure spans behave correctly */
    line-height: 0; /* Remove extra space */
    cursor: default; /* Indicate it's not clickable */
}

.game-icon {
    width: 120px; /* MODIFICATION: Adjusted size */
    height: 120px; /* MODIFICATION: Adjusted size */
    border-radius: 14px; /* MODIFICATION: Adjusted border-radius */
    object-fit: cover; /* Ensure image covers the area */
    border: 2px solid #555; /* Kept border width */
    transition: transform 0.2s ease, border-color 0.2s ease;
}

#view-all-games .cta-button {
    margin-top: 0; /* Remove potential top margin from button */
}

/* === ADDED: Store Buttons Container Styling === */
.store-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Adjust gap between buttons */
    margin-top: 50px; /* MODIFIED: Increased space above this container */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

/* MODIFIED: Specific styling for store buttons in this section */
#view-all-games .store-buttons-container .download-link {
    padding: 14px 30px; /* Match .cta-button padding */
    font-size: 1.1em;  /* Match .cta-button font-size */
}
/* === END: Store Buttons Container Styling === */

/* Game Details Page Styles (coming-soon-game.html) */
.game-details-section h1 {
    font-size: 2.5em;
    margin-bottom: 30px;
    color: #e63946; /* Keeping heading red */
    /* Font family inherited from general h1 rule */
}
.game-media { margin-bottom: 40px; max-width: 800px; margin-left: auto; margin-right: auto; }
.game-media img { max-width: 100%; height: auto; display: block; border-radius: 8px; border: 2px solid #444; }
.video-container { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; max-width: 100%; background: #000; border-radius: 8px; border: 2px solid #444; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.game-description, .game-features, .game-release-info { max-width: 800px; margin: 0 auto 30px auto; text-align: left; background-color: #2a2a2a; padding: 25px; border-radius: 8px; border: 1px solid #444; }
.game-description h2, .game-features h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #ffffff;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    /* Font family inherited from general h2/h3 rules */
}
.game-description p, .game-features li, .game-release-info p { color: #cccccc; line-height: 1.7; }
.game-features ul { list-style: disc; padding-left: 25px; margin-top: 10px; }
.game-features li { margin-bottom: 8px; }
.game-release-info { text-align: center; background-color: transparent; padding: 10px 0 0 0; border: none; }
.game-release-info p { font-weight: bold; color: #ffffff; margin-bottom: 10px; }
.game-release-info p:last-child { margin-bottom: 0; }
.game-release-info i { margin-right: 5px; }

/* === REMOVED: Old Games Slider Section Styles === */
/* #games-slider-section { ... } */
/* .game-swiper { ... } */
/* .swiper-slide { ... } */

/* === ADDED: New Games Grid Section Styles === */
#games-grid-section {
    background-color: #1a1a1a; /* Match body background */
    padding-top: 40px;
    padding-bottom: 60px;
}

.games-grid-container {
    display: grid;
    /* Adjust columns for responsiveness */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Start with 1 column, fit more as space allows */
    gap: 30px; /* Gap between cards */
    max-width: 1200px; /* Allow slightly wider container for grid */
    margin: 0 auto;
    padding: 0 15px; /* Padding on the sides */
}

.games-page-card {
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    /* padding: 15px; /* Padding moved to details */
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensure rounded corners clip content */
    position: relative; /* For absolute positioning of inner swiper controls */
}
.games-page-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Nested Swiper Styles */
.game-image-swiper {
    width: 100%;
    /* MODIFIED: Removed fixed height */
    /* height: 450px; */
    position: relative; /* Needed for controls */
    border-bottom: 1px solid #444; /* Separator */
}

.game-image-swiper .swiper-slide img {
    display: block;
    width: 100%;
    /* MODIFIED: Set height to auto */
    height: auto;
    /* object-fit: cover; /* No longer strictly needed if container fits image */
}

/* Nested Swiper Controls - Positioned OVER the image */
.game-image-swiper .swiper-button-prev,
.game-image-swiper .swiper-button-next {
    color: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    width: 30px; /* Smaller buttons */
    height: 30px;
    top: 50%; /* Center vertically */
    transform: translateY(-50%);
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-top: 0; /* Override default margin */
}
.game-image-swiper .swiper-button-prev:hover,
.game-image-swiper .swiper-button-next:hover {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
}
.game-image-swiper .swiper-button-prev { left: 8px; } /* Position inside */
.game-image-swiper .swiper-button-next { right: 8px; }

.game-image-swiper .swiper-button-prev::after,
.game-image-swiper .swiper-button-next::after {
    font-size: 14px; /* Smaller arrow icon */
    font-weight: bold;
}

/* Nested Swiper Pagination - Positioned OVER the image */
.game-image-swiper .swiper-pagination {
    bottom: 8px !important; /* Position pagination at bottom of image area */
    left: 50%;
    transform: translateX(-50%);
    width: auto; /* Allow width to adjust */
}
.game-image-swiper .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.6); /* Semi-transparent white dots */
    opacity: 1;
    width: 8px;
    height: 8px;
    margin: 0 4px !important; /* Spacing between dots */
}
.game-image-swiper .swiper-pagination-bullet-active {
    background-color: #ffffff; /* Solid white active dot */
}
/* End Nested Swiper Styles */

.games-page-card-details {
    padding: 15px; /* Padding for text content */
    flex-grow: 1; /* Push content down */
    display: flex;
    flex-direction: column;
    text-align: center;
}

.games-page-card h3 {
    font-size: 1.3em;
    margin-bottom: 8px;
    color: #ffffff;
    /* Font family inherited */
}

.game-release-year {
    font-size: 0.85em;
    color: #aaa;
    margin-bottom: 10px;
}

.game-short-description {
    font-size: 0.9em;
    color: #cccccc;
    margin-bottom: 15px;
    flex-grow: 1; /* Takes up available space */
    line-height: 1.5;
}

.games-page-card-downloads {
    display: flex;
    justify-content: space-around; /* Space out buttons */
    gap: 10px;
    margin-top: auto; /* Pushes to the bottom */
    flex-wrap: wrap; /* Allow wrapping if needed */
    padding-top: 10px; /* Add some space above buttons */
}

/* Adjust download link size within the slider card */
.games-page-card-downloads .download-link {
    padding: 8px 12px;
    font-size: 0.85em;
    gap: 5px; /* Smaller gap */
}
.games-page-card-downloads .download-link i {
    font-size: 1.1em;
}
/* === END ADDED: New Games Grid Section Styles === */

/* Footer */
footer {
    background-color: #333333; /* Dark gray footer */
    color: #aaa; /* Light gray text */
    padding: 30px 20px; /* Padding */
    margin-top: auto; /* Pushes footer to bottom */
    border-top: 1px solid #444; /* Top border */
    width: 100%;
    /* MODIFICATION: Use Flexbox for layout */
    display: flex;
    justify-content: space-between; /* Pushes copyright left, footer-right right */
    align-items: center; /* Vertically aligns items */
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    gap: 15px; /* Adds space between items when wrapped */
}

/* MODIFICATION: Ensure copyright takes available space on left */
.footer-copyright {
    margin: 0; /* Reset default margins */
    flex-grow: 1; /* Allows it to push footer-right */
    text-align: left; /* Align text left */
}

/* MODIFICATION: Container for right-aligned elements */
.footer-right {
    display: flex;
    align-items: center;
    gap: 25px; /* Space between social icons and nav */
    flex-wrap: wrap; /* Allow wrapping within this container too */
    justify-content: flex-end; /* Align items to the right */
}

/* MODIFICATION: Style social icons paragraph */
.footer-social {
    margin: 0; /* Reset default margins */
    text-align: right; /* Align text right */
}
.footer-social a {
    margin: 0 8px; /* Adjust spacing */
    color: #aaa; /* Default color for icons */
}
.footer-social i {
    font-size: 1.3em;
}

/* ADDED: Footer Navigation Styles */
.footer-nav {
    display: none; /* Hide by default on mobile */
}
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px; /* Space between nav items */
}
.footer-nav li {
    margin: 0;
}
.footer-nav a {
    color: #aaa; /* Default link color */
    font-size: 0.9em;
    text-decoration: none;
    /* Hover handled by general footer a:hover */
}

/* Cookie Elements */
.cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #2a2a2a; color: #f0f0f0; padding: 15px 25px; border-top: 1px solid #444; z-index: 1000; display: none; /* Shown by JS */ align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; }
.cookie-banner p { margin: 0; flex-grow: 1; font-size: 0.9em; }
.cookie-link { text-decoration: underline; margin-left: 5px; }
.cookie-button {
    background-color: #225380; /* MODIFIED: Changed default background to new button blue */
    color: white;
    padding: 8px 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    display: inline-flex; /* For arrow */
    align-items: center;
    justify-content: center;
}
.cookie-button:hover,
.cookie-button:focus { /* Added focus state */
    background-color: #498ccc; /* MODIFIED: Changed hover/focus background to new hover blue */
}
/* Styles for cookie-settings-trigger remain but won't apply on this page */
.cookie-settings-trigger {
    position: fixed;
    bottom: 70px; /* Raised the button further */
    right: 20px;
    background-color: #225380; /* MODIFIED: Changed default background to new button blue */
    color: white;
    border: none;
    border-radius: 50%; /* Circular */
    width: 50px;
    height: 50px;
    font-size: 24px; /* Icon size */
    cursor: pointer;
    z-index: 999; /* Below banner/modal, above content */
    display: none; /* Initially hidden, shown by JS */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Subtle shadow */
    transition: background-color 0.3s ease, transform 0.3s ease, bottom 0.3s ease; /* Added bottom transition */
    /* display: flex; /* Replaced by JS */
    align-items: center; /* Center icon */
    justify-content: center; /* Center icon */
}
.cookie-settings-trigger:hover,
.cookie-settings-trigger:focus { /* Added focus state */
    background-color: #498ccc; /* MODIFIED: Changed hover/focus background to new hover blue */
    transform: scale(1.1); /* Slightly enlarge on hover */
}
.cookie-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */ z-index: 1001; /* Above trigger/banner */ display: none; /* Hidden by default */ align-items: center; justify-content: center; padding: 20px; /* Padding for smaller screens */ }
.cookie-modal.modal-visible { display: flex; } /* Class added by JS to show */

/* MODIFICATION: Added max-height and overflow-y */
.cookie-modal-content {
    background-color: #2a2a2a;
    color: #f0f0f0;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #444;
    max-width: 500px;
    width: 90%; /* Responsive width */
    position: relative; /* For close button */
    text-align: left; /* Align text left */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); /* Stronger shadow */
    max-height: 75vh; /* Limit height to 75% of viewport height */
    overflow-y: auto; /* Add vertical scrollbar ONLY if needed */
}

.cookie-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: #aaa; /* Gray close button */
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    z-index: 1; /* Ensure close button is above content */
}
.cookie-modal-close:hover {
    color: #fff; /* White on hover */
}
.cookie-modal h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #ffffff;
    text-align: center;
    /* Font family inherited from general h2 rule */
}
.cookie-modal p { margin-bottom: 15px; font-size: 0.95em; color: #cccccc; }

/* ADDED: Rule to ensure list items in modal are not bold */
.cookie-modal-content ul li {
    font-weight: normal; /* Ensure list items are not bold */
    margin-bottom: 5px; /* Add some space between list items */
}
/* If the links themselves are bold, uncomment and use this: */
/*
.cookie-modal-content ul li a {
    font-weight: normal;
}
*/

.cookie-link-modal {
    display: inline-block; /* Button-like link */
    background-color: #225380; /* MODIFIED: Changed default background to new button blue */
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}
.cookie-link-modal:hover,
.cookie-link-modal:focus { /* Added focus state */
    background-color: #498ccc; /* MODIFIED: Changed hover/focus background to new hover blue */
    color: #fff;
}
.cookie-modal-info { font-size: 0.85em; color: #aaa; margin-top: 25px; border-top: 1px solid #444; padding-top: 15px; }

/* === Button Arrow Styles === */
.button-arrow-container {
    display: inline-flex; /* Align arrow correctly */
    align-items: center;
    margin-left: 8px; /* Space between main content and arrow */
    line-height: 1; /* Prevent extra vertical space */
    transition: all 0.2s ease; /* Smooth transition for potential future changes */
}

.button-arrow-container .hover-arrow {
    display: none; /* Hide hover arrow by default */
    transition: font-size 0.2s ease; /* Animate size change */
}

.button-arrow-container .default-arrow {
    display: inline-block; /* Show default arrow */
}

/* Show hover arrow and hide default arrow on button hover/focus */
/* MODIFIED: Added .download-link, .cookie-button, .cookie-modal-full-policy-btn to selectors */
/* REMOVED: .coming-soon-button selectors */
.cta-button:hover .button-arrow-container .default-arrow,
.cta-button:focus .button-arrow-container .default-arrow,
.cookie-button:hover .button-arrow-container .default-arrow,
.cookie-button:focus .button-arrow-container .default-arrow,
.download-link:hover .button-arrow-container .default-arrow,
.download-link:focus .button-arrow-container .default-arrow,
.cookie-modal-full-policy-btn:hover .button-arrow-container .default-arrow,
.cookie-modal-full-policy-btn:focus .button-arrow-container .default-arrow {
    display: none; /* Hide default on hover/focus */
}

/* MODIFIED: Added .download-link, .cookie-button, .cookie-modal-full-policy-btn to selectors + font-size increase */
/* REMOVED: .coming-soon-button selectors */
.cta-button:hover .button-arrow-container .hover-arrow,
.cta-button:focus .button-arrow-container .hover-arrow,
.cookie-button:hover .button-arrow-container .hover-arrow,
.cookie-button:focus .button-arrow-container .hover-arrow,
.download-link:hover .button-arrow-container .hover-arrow,
.download-link:focus .button-arrow-container .hover-arrow,
.cookie-modal-full-policy-btn:hover .button-arrow-container .hover-arrow,
.cookie-modal-full-policy-btn:focus .button-arrow-container .hover-arrow {
    display: inline-block; /* Show hover arrow */
    font-size: 1.25em; /* Increased size (adjust value as needed) */
}
/* === END Button Arrow Styles === */

/* === MODIFIED: Style for the new button inside the cookie modal === */
.cookie-modal-full-policy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 25px auto 0 auto;
    background-color: #225380;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    font-size: 0.95em;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
}

.cookie-modal-full-policy-btn:hover,
.cookie-modal-full-policy-btn:focus {
    background-color: #498ccc;
    color: #fff;
}
/* === END Added Style === */

/* === Media Queries === */

/* Tablet and Medium Screens */
@media (max-width: 992px) {
    .hero { padding: 110px 20px 70px 20px; }
    /* === MODIFIED: Privacy/About page hero padding adjustment === */
    /* REMOVED: #games-page-body .hero from this rule */
    #about-page-body .hero,
    #privacy-page-body .hero { padding: 90px 20px 20px 20px; }

    .logo { height: 117px; } /* Slightly smaller logo */
    .desktop-nav-list li a { font-size: 1.0em; } /* Smaller nav font */

    /* MODIFIED: Stack coming soon and showcase items (These sections not on games.html) */
    .coming-soon-item,
    .showcase-game-card {
        flex-direction: column; /* Stack image and details */
        align-items: center; /* Center items when stacked */
        gap: 25px; /* Adjust gap for stacked layout */
        padding: 25px;
    }
    .coming-soon-image,
    .showcase-game-image {
        flex-basis: auto; /* Reset flex basis */
        width: 85%; /* Control width when stacked */
        max-width: 510px; /* Limit max width */
        margin: 0 auto 0 auto; /* Center horizontally, remove bottom margin */
    }
    .coming-soon-details,
    .showcase-game-details {
        /* text-align: center; /* Removed, handled by children */
        align-items: center; /* Center align items inside */
        width: 100%; /* Ensure details take full width */
    }
    .coming-soon-details h3,
    .showcase-game-card h3 {
        text-align: center; /* Keep title centered */
    }
    .coming-soon-details p,
    .showcase-game-details p {
        max-width: 90%; /* Limit text width slightly */
        text-align: justify; /* Keep text justified */
        margin-left: auto; /* Center paragraph block */
        margin-right: auto; /* Center paragraph block */
    }
    /* REMOVED: .coming-soon-button adjustments */
    /* .coming-soon-button { ... } */

    .showcase-game-downloads {
        align-self: center; /* Ensure container is centered */
        justify-content: center; /* Ensure buttons inside are centered */
        margin-top: 15px; /* Add some top margin when stacked */
    }
    /* End stacking modifications */

    .game-icon-grid { max-width: 90%; gap: 25px; } /* MODIFICATION: Adjusted gap */
    .game-icon {
        width: 100px; /* MODIFICATION: Adjusted size */
        height: 100px; /* MODIFICATION: Adjusted size */
        border-radius: 12px; /* MODIFICATION: Adjusted radius */
    }

    .desktop-nav-container { display: flex; } /* Keep desktop nav */
    .mobile-menu-button { display: none; } /* Hide hamburger */
    .mobile-nav-panel { display: flex; visibility: hidden; } /* Keep panel structure but hidden */

    /* Footer adjustments for tablet */
    footer {
        justify-content: center; /* Center items when wrapped */
        text-align: center;
    }
    .footer-copyright {
        width: 100%; /* Take full width */
        text-align: center; /* Center text */
        margin-bottom: 10px; /* Add space below */
        flex-grow: 0; /* Don't allow grow */
        order: 2; /* Move copyright below other items */
    }
    .footer-right {
        justify-content: center; /* Center social and nav */
        width: 100%;
        order: 1; /* Move right content above copyright */
    }
    .footer-social {
        text-align: center;
    }
    /* Footer nav remains hidden below 769px (or controlled by the min-width query later) */

    /* Privacy Policy Title Size Adjustment */
    #privacy-policy-content h1 { font-size: 3.5em; }

    /* REMOVED: About Us Image size adjustment */
    /* .about-image { max-height: 350px; } */

    /* === ADDED: About Us adjustments for tablet === */
    #about-us h2 { font-size: 3.5em; } /* Slightly smaller heading */
    .stat-number { font-size: 2.8em; } /* Slightly smaller stat number */
    .stat-label { font-size: 1.0em; } /* Adjust label size */
    .about-contact-section { padding: 25px; }
    .about-contact-section h3 { font-size: 1.7em; } /* Adjust contact heading size */
    /* === END ADDED: About Us adjustments === */

    /* === MODIFIED: Grid adjustments for tablet === */
    .games-grid-container {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Adjust min size */
        gap: 25px;
    }
    /* MODIFIED: Removed fixed height */
    /* .game-image-swiper {
        height: 380px;
    } */
    .games-page-card h3 { font-size: 1.2em; }
    .game-short-description { font-size: 0.85em; }
    .games-page-card-downloads .download-link { font-size: 0.8em; }
    /* === END MODIFIED: Grid adjustments === */

}

/* Mobile and Small Tablets */
@media (max-width: 768px) {
    .hero { padding: 90px 15px 50px 15px; min-height: 45vh; } /* Adjust padding/height */
    /* === MODIFIED: Privacy/About page hero padding adjustment === */
    /* REMOVED: #games-page-body .hero from this rule */
    #about-page-body .hero,
    #privacy-page-body .hero { padding: 80px 15px 15px 15px; min-height: auto; }

    .logo-container { top: 15px; left: 15px; }
    .logo { height: 78px; } /* Smaller logo */
    .desktop-nav-container { display: none; } /* Hide desktop nav */
    .mobile-menu-button { display: block; } /* Show hamburger */
    .hero h1 { font-size: 3.0em; } /* Smaller hero title */
    .hero h1 .never-ends-text,
    #games-page-body .hero h1 .games-text { -webkit-text-stroke-width: 1.5px; text-stroke-width: 1.5px; } /* Thinner outline */
    .hero-subtitle { font-size: 1.1em; margin-bottom: 25px; }
    .games-list { flex-direction: column; align-items: center; } /* Stack game cards */
    .game-card { width: 90%; max-width: 350px; } /* Adjust game card width */
    /* Contact info styles remain but won't apply if page is unused */
    .contact-info p { font-size: 1em; flex-direction: column; gap: 5px; } /* Stack contact info */
    .contact-info i { font-size: 1.5em; margin-bottom: 5px; }
    .page-section { padding: 40px 15px; max-width: 100%; } /* Allow full width */
    /* === MODIFIED: Text content section adjustments === */
    .text-content-section p, .text-content-section ul { max-width: 100%; } /* Full width text */

    /* Adjustments for stacked items on smaller screens (Sections not on games.html) */
    .coming-soon-container,
    .showcase-games-container { padding: 0 15px; }
    .coming-soon-item,
    .showcase-game-card { padding: 20px; margin-bottom: 30px; }
    .coming-soon-image,
    .showcase-game-image { width: 90%; max-width: 400px; } /* Adjust max width */
    .coming-soon-details h3,
    .showcase-game-card h3 { font-size: 1.5em; margin-bottom: 15px; }
    .coming-soon-details p,
    .showcase-game-details p { font-size: 0.9em; max-width: 100%; } /* Allow full width text */
    .showcase-game-downloads { gap: 10px; }
    .download-link { padding: 10px 15px; font-size: 0.85em; }
    /* End adjustments */

    .game-icon-grid { padding: 0 15px; gap: 20px; } /* MODIFICATION: Adjusted gap */
    .game-icon {
        width: 100px; /* MODIFICATION: Adjusted size */
        height: 100px; /* MODIFICATION: Adjusted size */
        border-radius: 12px; /* MODIFICATION: Adjusted radius */
    }

    /* Adjust store buttons gap and size */
    .store-buttons-container {
        gap: 15px;
        margin-top: 40px; /* Adjust margin */
    }
    /* Adjust size for store buttons in this section on smaller screens */
    #view-all-games .store-buttons-container .download-link {
        padding: 12px 25px; /* Slightly smaller padding */
        font-size: 1.0em;  /* Slightly smaller font */
    }

    .game-details-section h1 { font-size: 2em; } /* Smaller game details title */
    .game-description, .game-features { padding: 20px; }
    .cookie-banner { padding: 15px; text-align: center; justify-content: center; } /* Center cookie banner content */
    .cookie-banner p { margin-bottom: 10px; }
    /* Cookie settings trigger styles remain but won't apply on this page */
    .cookie-settings-trigger {
        width: 45px; /* Smaller trigger button */
        height: 45px;
        font-size: 20px; /* Smaller icon */
        bottom: 55px; /* Adjusted bottom for smaller size */
        right: 15px;
    }
    .cookie-modal-content {
        padding: 20px; /* Less padding in modal */
        max-height: 80vh; /* Allow slightly more height on smaller screens */
    }
    .cookie-modal h2 { font-size: 1.5em; } /* Smaller modal title */

    /* Footer adjustments for mobile */
    .footer-nav {
        display: none; /* Ensure footer nav is hidden */
    }
    .footer-right {
        gap: 15px; /* Reduce gap */
    }

    /* Privacy Policy Title Size Adjustment */
    #privacy-policy-content h1 { font-size: 3em; margin-bottom: 30px;}

    /* REMOVED: About Us Image size adjustment */
    /* .about-image { max-height: 300px; } */

    /* === MODIFIED: About Us adjustments for mobile === */
    #about-us h2 { font-size: 3em; margin-bottom: 30px; } /* Smaller heading */
    .about-stats {
        /* flex-direction: column; /* REMOVED: Keep horizontal */
        gap: 15px; /* MODIFIED: Reduced gap for horizontal layout */
        padding: 20px 0;
        margin-bottom: 30px;
        /* border-top: none; /* REMOVED: No borders */
        justify-content: space-evenly; /* Adjust justification */
    }
    .stat-item {
        min-width: auto; /* MODIFIED: Remove min-width */
        flex-basis: 30%; /* Allow items to take roughly a third */
    }
    .stat-number { font-size: 2.0em; } /* MODIFIED: Smaller stat number */
    .stat-label { font-size: 0.85em; line-height: 1.2; } /* MODIFIED: Smaller label, adjust line height */
    .about-contact-section { padding: 20px; margin-top: 30px; }
    .about-contact-section h3 { font-size: 1.6em; margin-bottom: 20px; } /* Adjust contact heading */
    .about-contact-section p { font-size: 0.95em; gap: 10px; }
    .about-contact-section i { font-size: 1.3em; }
    /* === END MODIFIED: About Us adjustments === */

    /* === MODIFIED: Grid adjustments for mobile === */
    .games-grid-container {
        grid-template-columns: 1fr; /* Single column */
        gap: 25px;
        max-width: 400px; /* Limit width for single column */
    }
    /* MODIFIED: Removed fixed height */
    /* .game-image-swiper {
        height: 360px;
    } */
    .games-page-card h3 { font-size: 1.3em; }
    .game-short-description { font-size: 0.9em; }
    .games-page-card-downloads { justify-content: center; } /* Center buttons */
    .games-page-card-downloads .download-link { font-size: 0.85em; }
    /* === END MODIFIED: Grid adjustments === */

}

/* ADDED: Media Query to show Footer Nav on Desktop */
@media (min-width: 769px) { /* Adjust breakpoint as needed */
    .footer-nav {
        display: block; /* Show the nav container */
    }
    /* Ensure footer layout is space-between on desktop */
    footer {
        justify-content: space-between;
        text-align: left; /* Reset text align */
    }
    .footer-copyright {
        text-align: left; /* Align left */
        width: auto; /* Reset width */
        margin-bottom: 0; /* Reset margin */
        flex-grow: 0; /* Reset grow */
        order: 0; /* Reset order */
    }
    .footer-right {
        justify-content: flex-end; /* Align right */
        width: auto; /* Reset width */
        order: 0; /* Reset order */
    }
    .footer-social {
        text-align: right;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .hero { padding-top: 80px; padding-bottom: 40px; min-height: 50vh; } /* Adjust hero padding/height */
    /* === MODIFIED: Privacy/About page hero padding adjustment === */
    /* REMOVED: #games-page-body .hero from this rule */
    #about-page-body .hero,
    #privacy-page-body .hero { padding: 70px 15px 15px 15px; }

    .logo { height: 65px; } /* Even smaller logo */
    .hero h1 { font-size: 2.5em; } /* Smaller hero title */
    .hero h1 .never-ends-text,
    #games-page-body .hero h1 .games-text { -webkit-text-stroke-width: 1px; text-stroke-width: 1px; } /* Thinnest outline */
    .hero-subtitle { font-size: 1.0em; } /* Smaller subtitle */
    /* REMOVED: .coming-soon-button from this list */
    .cta-button, .download-btn, .download-link, .cookie-button, .cookie-modal-full-policy-btn { padding: 10px 18px; font-size: 0.9em; } /* Adjust button padding/size */
    .game-card { width: 95%; } /* Slightly wider game card */

    /* Further adjustments for small mobile (Sections not on games.html) */
    .coming-soon-item,
    .showcase-game-card { padding: 15px; gap: 20px; }
    .coming-soon-details h3,
    .showcase-game-card h3 { font-size: 1.3em; }
    #coming-soon h2,
    #showcase-games h2 { font-size: 1.8em; }
    .coming-soon-image,
    .showcase-game-image { width: 95%; max-width: 320px; }
    .coming-soon-details p,
    .showcase-game-details p { font-size: 0.9em; }
    .download-link { padding: 8px 12px; font-size: 0.85em; gap: 6px; } /* General download link size */
    .showcase-game-downloads { gap: 8px; }
    /* End small mobile adjustments */

    #view-all-games h2 { font-size: 1.8em; }
    .game-icon {
        width: 90px; /* MODIFICATION: Adjusted size */
        height: 90px; /* MODIFICATION: Adjusted size */
        border-radius: 10px; /* MODIFICATION: Adjusted radius */
    }
    .game-icon-grid { gap: 20px; } /* MODIFICATION: Adjusted gap */

    /* Adjust store buttons gap and size for small mobile */
    .store-buttons-container {
        gap: 10px;
        margin-top: 35px; /* Adjust margin */
    }
    /* Adjust size for store buttons in this section on smallest screens */
    #view-all-games .store-buttons-container .download-link {
        padding: 10px 18px; /* Match other small buttons */
        font-size: 0.9em;  /* Match other small buttons */
    }

    .game-details-section h1 { font-size: 1.8em; }
    .game-description h2, .game-features h3 { font-size: 1.2em; }
    .mobile-nav-panel { width: 85%; max-width: 300px; padding-top: 70px; } /* Adjust panel width/padding */
    .mobile-nav-panel li a { font-size: 1.1em; padding: 10px 15px; }
    .mobile-menu-button { padding: 6px; width: 37px; height: 34px; } /* Adjust hamburger size */
    .hamburger-line { width: 22px; height: 2px; margin: 4px auto; } /* Adjust line size/spacing */
    /* Adjust hamburger animation for smaller size */
    .mobile-menu-button.is-active .hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .mobile-menu-button.is-active .hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    .button-arrow-container {
        margin-left: 6px; /* Less space for arrow */
    }

    /* Adjust hover arrow size slightly for small mobile if needed */
    /* MODIFIED: Added .cookie-modal-full-policy-btn */
    /* REMOVED: .coming-soon-button selectors */
    .cta-button:hover .button-arrow-container .hover-arrow,
    .cta-button:focus .button-arrow-container .hover-arrow,
    .cookie-button:hover .button-arrow-container .hover-arrow,
    .cookie-button:focus .button-arrow-container .hover-arrow,
    .download-link:hover .button-arrow-container .hover-arrow,
    .download-link:focus .button-arrow-container .hover-arrow,
    .cookie-modal-full-policy-btn:hover .button-arrow-container .hover-arrow,
    .cookie-modal-full-policy-btn:focus .button-arrow-container .hover-arrow {
        font-size: 1.2em; /* Slightly smaller increase on small screens */
    }

    /* Footer adjustments for small mobile */
    .footer-right {
        gap: 10px; /* Further reduce gap */
        justify-content: center; /* Ensure centering */
    }
    .footer-social a {
        margin: 0 5px; /* Reduce icon spacing */
    }

    /* Cookie trigger adjustment for small mobile - styles remain but won't apply on this page */
    .cookie-settings-trigger {
        bottom: 45px; /* Adjusted bottom for smallest screens */
        right: 10px;
    }

    /* Privacy Policy Title Size Adjustment */
    #privacy-policy-content h1 { font-size: 2.5em; margin-bottom: 25px;}

    /* REMOVED: About Us Image size adjustment */
    /* .about-image { max-height: 250px; } */

    /* === MODIFIED: About Us heading size adjustment for small mobile === */
    #about-us h2 { font-size: 2.5em; margin-bottom: 25px; } /* Further reduce heading size */
    .stat-number { font-size: 1.8em; } /* MODIFIED: Further reduce stat number size */
    .stat-label { font-size: 0.8em; } /* MODIFIED: Further reduce label size */
    .about-stats { gap: 10px; } /* Reduce gap further */
    .about-contact-section { padding: 15px; }
    .about-contact-section h3 { font-size: 1.4em; } /* Adjust contact heading */
    .about-contact-section p { font-size: 0.9em; }
    .about-contact-section p span, /* Adjust contact text size */
    .about-contact-section a span {
        font-size: 0.9em; /* Make contact text slightly smaller */
    }

    /* === MODIFIED: Grid adjustments for small mobile === */
    .games-grid-container {
        grid-template-columns: 1fr; /* Ensure single column */
        max-width: 320px; /* Further limit width */
        gap: 20px;
    }
    /* MODIFIED: Removed fixed height */
    /* .game-image-swiper {
        height: 320px;
    } */
    .games-page-card h3 { font-size: 1.2em; }
    .game-short-description { font-size: 0.85em; }
    .games-page-card-downloads .download-link { font-size: 0.8em; padding: 8px 10px; }
    /* === END MODIFIED: Grid adjustments === */

}

/* === ADDED: Adjust Google Play button position when it's the only button === */
/* This targets the Google Play link only when it's the single child
   inside the downloads container (i.e., after the App Store link is removed) */
.games-page-card-downloads .download-link.google-play:only-child {
    position: relative; /* Allows adjustment without affecting flow */
    bottom: 5px; /* Move button up slightly (adjust value as needed) */
    /* You might want to center it if it looks off */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    /* width: fit-content; /* Adjust width if centering */
}
/* === END Added Style === */