body {
            background-color: #111827;
            font-family: Arial, Helvetica, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        /* MODIFICATION: Container is now a vertical flexbox column */
        #container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            width: 100%;
        }

        /* NEW: This wrapper handles the horizontal layout of the puzzle and controls */
        #main-content {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 2rem;
            padding: 2rem;
            flex-grow: 1; /* This makes it grow to push the footer down */
        }

        #solution-container {
            background-color: #FFFFFF;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        #controls-container {
            background-color: #1f2937;
            color: #d1d5db;
            padding: 24px;
            border-radius: 8px;
            width: 320px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        #puzzle-title {
            color: #60a5fa;
            margin-top: 0;
            font-size: 1.5rem;
            text-align: left;
        }
        .subtitle {
            color: #9ca3af;
            margin-top: -15px;
            margin-bottom: 20px;
            font-size: 0.9em;
        }
        #controls-container p {
            font-size: 0.9em;
            text-align: left;
        }
        #gui {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        #gui > div:not(#status) {
            display: grid;
            grid-template-columns: 1fr 2fr;
            align-items: center;
        }
        label {
            font-weight: bold;
        }
        select {
            background-color: #374151;
            color: white;
            border: 1px solid #4b5563;
            border-radius: 6px;
            padding: 8px;
            width: 100%;
        }
        button {
            color: white;
            border: none;
            padding: 12px;
            border-radius: 6px;
            font-size: 1em;
            font-weight: bold;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        button:hover {
            opacity: 0.9;
        }
        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        #hint-button {
            background-color: #0ea5e9; /* Blue */
        }
        #reset-button {
            background-color: #ef4444; /* Red */
        }
        #status {
            min-height: 20px;
            text-align: center;
        }
        
        /* MODIFICATION: Unhiding the footer and giving it some style */
        footer { 
            display: block; 
            width: 100%;
            padding: 1.5rem 0;
            text-align: center;
            color: #9ca3af;
            font-size: 0.9em;
        }
        footer a {
            color: #60a5fa;
            text-decoration: none;
        }
        footer a:hover {
            text-decoration: underline;
        }