/* 
 * Reset and Base Styles for basic formatting within the webpage
 * This section ensures that all elements start with no margin or padding, and sets up the basic font and layout for the site.
 */
* {
    margin: 0;
    padding: 0;
}

body, html {
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden; /* Prevents double scrollbars */
}

/* The Layout Container */
.site-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    z-index: 1;
}

/* The Header and Footer style */
.main-header, .main-footer {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* The Main Content Area where the primary content is displayed */
.content-area {
    display: flex;
    flex: 1;

    /* Prevents the main site from scrolling */
    overflow: hidden;
}

/* The Master IFrame Shell that loads all pages within its boundaries */
#content-shell {
    width: 100%;
    height: 100%;
    border: none;
    display: block;

    /* Secondary insurance against scrollbars */
    overflow: hidden;
}

/* --- Game Page Specific Layout --- */

/* Style for the game page */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

    /* This hides the scrollbar of the index.html within the game itself */
    overflow: hidden;
}

/* The container for the game IFrame, ensuring it fills the entire viewport and has a flexible layout */
.game-wrapper, .iframe-container {
    width: 100vw;
    height: 100vh;
    display: flex;
}

/* The IFrame that loads the Unity game, set to fill its container and hide any overflow to prevent scrollbars */
#unity-iframe {
    width: 100%;
    height: 100%;
    border: none;

    /* Removes the tiny gap at the bottom of the iframe */
    display: block;
    overflow: hidden;
}

/* The Animated Background style */
.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(-45deg, #7d1099, #2b1379, #ab13e2);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
}

/* 
 * This keyframe animation creates a smooth, looping gradient background that shifts colors over time, 
 * giving a dynamic and visually appealing effect to the site. 
 */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    25% { background-position: 50% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* The Stars Layer style */
#stars {
    width: 2px;
    height: 2px;
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    /* The box-shadow is injected here by JavaScript */
    animation: spaceScroll 100s linear infinite;
}

/* 
 * This creates a second "layer" of the same stars below the first 
 * to make the loop seamless as they scroll up 
 */
#stars::after {
    content: "";
    position: absolute;
    top: 100vh; 
    width: 2px;
    height: 2px;
    background: transparent;

    /* Copies the 100 stars exactly */
    box-shadow: inherit;
}

/* This keyframe animation scrolls the stars upwards, creating the illusion of moving through space. 
 * The stars start at their original position and move up by 100vh, which is the height of the viewport, 
 * before looping back to the start to create a continuous scrolling effect.
 */
@keyframes spaceScroll {
    from { transform: translateY(0); }
    to { transform: translateY(-100vh); }
}

/* Simple Button Styling */
button {
    background: #ad76c6;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
}

/* --- Game Selection Page Styles --- */

/* 
 * Determines the style of the grid. 
 * A responsive layout that adapts to different screen sizes 
 */
.games-grid {
    display: grid;
    /* This creates as many 250px columns as will fit on one line */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px; 
    padding: 40px;
    width: 90%;          /* Take up most of the screen width */
    margin: 0 auto;      /* Center the whole grid on the page */
    justify-content: center; 
}

/* 
 * Wraps it all within a card to ensure the image and text stay aligned together 
 */
button.game-card {
    width: 250px;
    background: rgba(255, 255, 255, 0.05); /* Slight background to see the card area */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    color: white;
}

/* Ensure the button and its contents stay centered */
.game-card {
    display: table-cell;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s;
}

/* Better accessibility: show a glow when tabbing through games */
button.game-card:focus {
    transform: scale(1.05);
    filter: drop-shadow(0 0 10px #3e0053);
}

button.game-card:active {
    transform: scale(0.95); /* Shrinks slightly when clicked for a aesthetics */
}

/* This forces the container to stay at 250px */
.thumbnail {
    width: 250px;
    height: 180px;

    /* Black background for the square to ensure the image is easily visible */
    background: #000;
    border: 2px solid #333;
    border-radius: 8px;

    /* This clips any image parts that are too big */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* This forces the Image to stay small */
.thumbnail img {
    width: 100%;
    height: 100%;

    /* This makes the image fill the square without stretching by filling the frame */
    object-fit: contain;
    display: block;
}

/* --- About Page Styles --- */

/* Ensures the page content is centered and does not exceed maximum width */
.about-container {
    width: 90%;
    max-width: 1366px; 
    margin: 0 auto;
    padding: 40px;
    box-sizing: border-box;
    color: #e0e0e0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #343434;
}

/* Header styling with a purple accent */
.about-container header {
    border-bottom: 2px solid #ad76c6;
    margin-bottom: 30px;
    padding-bottom: 10px;
}

.about-container h1 {
    color: #ffffff;
    font-size: 2.5rem;
    margin: 0;
}

/* Section headers with a vertical accent bar */
.about-container h2 {
    color: #ffffff;
    margin-top: 40px;
    font-size: 1.8rem;
    border-left: 4px solid #ad76c6;
    padding-left: 15px;
}

/* Clear effect for content blocks to match a modern game UI */
.section-content {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.6;
}

/* Custom Bullet Points */
.about-container ul {
    list-style: none;
    padding: 0;
}

.about-container li {
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
}

/* Adds a purple dot before each list item */
.about-container li::before {
    content: "•";
    color: #ad76c6;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Highlights and bold text */
.about-container strong {
    color: #fff;
}

.highlight {
    color: #ad76c6;
    font-weight: bold;
}