:root {
    --primary-blue: #4A4A7A; /* Dark blue from the image */
    --light-pink: #F8E2DC; /* Light pink background from the image */
    --button-orange: #FF8C42; /* Orange button color */
    --button-hover-orange: #E07A3B;
    --text-dark-blue: #3A3A6A;
    --text-white: #FFFFFF;
    --container-bg-white: #FFFFFF;
    --container-shadow-blue: #4A4A7A;
}

body {
    font-family: Arial, sans-serif; /* Adjusted font for closer match */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ensure it takes full viewport height */
    margin: 0;
    /* REMOVED: overflow: hidden; - This was causing the scroll issue */
    background-color: var(--light-pink); /* Base background color */
}

/* Pattern background - replicating the dots */
.background-pattern {
    position: fixed; /* Changed to fixed so it covers the whole viewport and doesn't scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(var(--primary-blue) 2px, transparent 2px);
    background-size: 20px 20px; /* Adjust dot size and spacing */
    opacity: 0.8; /* Slight transparency for the dots */
    z-index: -1; /* Send it behind the content */
}

.main-container {
    background-color: var(--container-bg-white);
    padding: 40px; /* Increased padding */
    border-radius: 15px; /* More rounded corners */
    box-shadow: 10px 10px 0px 0px var(--primary-blue); /* Distinct shadow */
    text-align: center;
    max-width: 90%;
    width: 650px; /* Slightly wider container */
    margin: 20px; /* Ensure some margin on smaller screens */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    /* Add min-height to ensure it's tall enough to contain content, especially before image loads */
    min-height: 500px; /* Adjust as needed */
    display: flex; /* Use flexbox to center content vertically within container */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
}

/* Hidden class for toggling sections */
.hidden {
    display: none !important;
}

/* --- Landing Page Styles --- */
.landing-page-section {
    padding: 20px 0;
    width: 100%; /* Ensure it takes full width for flexbox centering */
}

.landing-title {
    font-family: 'Pixelify Sans', cursive; /* Ideal for pixel art theme - if you can link it from Google Fonts */
    font-size: 4em; /* Much larger font size */
    color: var(--primary-blue);
    margin-bottom: 20px;
    letter-spacing: -2px; /* Slight adjustment for font */
}

/* Fallback for Press Start 2P if not loaded */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: local('Press Start 2P'), local('PressStart2P-Regular'), url('https://fonts.gstatic.com/s/pressstart2p/v15/8GYghDMpVaXw2oSwsf3sP_vJch6L8N6S.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


.pixel-avatars {
    display: flex;
    justify-content: center;
    gap: 15px; /* Space between avatars */
    margin-bottom: 30px;
}

.pixel-avatars img {
    width: 60px; /* Larger pixel avatars */
    height: 60px;
    image-rendering: crisp-edges; /* Keep pixel art sharp */
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast; /* Small pixel-like shadow */
}

.tagline {
    font-size: 1.2em;
    color: var(--text-dark-blue);
    margin-bottom: 40px;
}

.get-started-button {
    background-color: var(--button-orange);
    color: var(--text-white);
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    transition: background-color 0.3s ease, box-shadow 0.1s ease;
    box-shadow: 4px 4px 0px 0px var(--primary-blue); /* Pixel-art button shadow */
}

.get-started-button:hover {
    background-color: var(--button-hover-orange);
    box-shadow: 2px 2px 0px 0px var(--primary-blue); /* Smaller shadow on hover */
    transform: translate(2px, 2px); /* Simulate button press */
}

/* --- Pixelator Page Styles --- */
.pixelator-page-section {
    padding: 20px 0;
    width: 100%; /* Ensure it takes full width for flexbox centering */
    display: flex; /* Use flexbox for inner layout */
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
}

.pixelator-title {
    font-size: 2em; /* Smaller than landing title */
    color: var(--primary-blue);
    margin-bottom: 25px;
}

.input-section {
    margin-bottom: 25px;
    display: flex; /* Use flexbox to align upload button and slider */
    flex-direction: column; /* Stack them */
    align-items: center; /* Center horizontally */
    gap: 15px; /* Space between upload button and pixel size control */
}

.upload-button {
    display: inline-block; /* Still inline-block for its intrinsic size */
    background-color: var(--primary-blue); /* Use primary blue for upload button */
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    /* margin-bottom: 15px; - Removed, gap in flexbox handles it */
}

.upload-button:hover {
    background-color: #3a3a6a; /* Slightly darker blue on hover */
}

.pixel-size-control {
    margin-top: 0; /* Removed margin-top, gap in flexbox handles it */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--text-dark-blue); /* Color for pixel size text */
}

.pixel-size-control label {
    font-weight: bold;
}

.pixel-size-control input[type="range"] {
    width: 150px;
    accent-color: var(--primary-blue); /* Color for range slider thumb/track */
}

#pixelSizeValue {
    color: var(--text-dark-blue);
}

.canvas-container {
    margin: 25px auto;
    border: 2px solid var(--primary-blue); /* Stronger border */
    box-shadow: 4px 4px 0px 0px var(--button-orange); /* Pixel-art shadow for canvas */
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    /* max-height: 400px; /* Added to limit canvas container height if image is very tall */
    /* overflow-y: auto; */ /* If you want scrollbars for very large images, but it's often better to scale the canvas drawing itself */
}

canvas {
    display: block;
    max-width: 100%;
    height: auto;
    image-rendering: crisp-edges; /* Important for pixelated canvas to look sharp */
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}

.download-button {
    background-color: var(--button-orange); /* Use orange for download button */
    color: var(--text-white);
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease, box-shadow 0.1s ease;
    display: block;
    margin: 20px auto 0 auto;
    width: fit-content;
    box-shadow: 4px 4px 0px 0px var(--primary-blue); /* Pixel-art button shadow */
}

.download-button:hover {
    background-color: var(--button-hover-orange);
    box-shadow: 2px 2px 0px 0px var(--primary-blue); /* Smaller shadow on hover */
    transform: translate(2px, 2px); /* Simulate button press */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .main-container {
        padding: 25px;
        width: 95%; /* More flexible width on smaller screens */
    }
    .landing-title {
        font-size: 2.5em; /* Adjust font size for smaller screens */
    }
    .pixel-avatars img {
        width: 40px;
        height: 40px;
    }
    .tagline {
        font-size: 1em;
    }
    .get-started-button, .download-button {
        padding: 10px 20px;
        font-size: 1em;
    }
    .pixel-size-control {
        flex-direction: column;
    }
}