/* --- Font Face --- */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* --- CSS Variables --- */
:root {
    /* Sizes */
    --grid-size: 15; /* This will be updated by JS if needed */
    --block-size: clamp(16px, 5vw, 30px); /* clamp(min, preferred, max) */
    --grid-gap: 1px;
    --grid-border: 1px;
    --grid-max-width-calc: calc(var(--grid-size) * (var(--block-size) + var(--grid-gap)) + (2 * var(--grid-border)));
    --grid-effective-max-width: min(90vw, var(--grid-max-width-calc));

    /* Colors */
    --dark-block: indigo;
    --light-text: #e5e7eb;
    --medium-text: #9ca3af;
    --dark-text: #111827;

    /* UPDATED: Set your preferred purple background as the default dark background */
    --dark-bg: #7943bf;

    --medium-bg: #1f2937;
    --light-bg: #ffffff;
    --accent-color: #3b82f6;
    --accent-hover: #2563eb;
    --highlight-bg: #dbeafe;
    --highlight-text: #1e3a8a;
    --active-bg: #d7dd7f;
    --active-text: #1e40af;
    --border-color: #4b5563;
    --active-border: #60a5fa;
    --correct-text: #16a34a;
    --incorrect-text: #dc2626;
    --icon-color: #d1d5db;
    --icon-hover-color: #ffffff;

    /* Variables derived from your original inline HTML styles (used for .header) */
    --page-specific-header-bg: #7943bf; /* This was the header's original BG, same as body now */
    --page-specific-link-color: salmon;
    --confetti-color: #f00; /* Confetti color */
}

/* --- Basic Styling --- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    overflow-x: hidden; /* Prevent horizontal scrollbars by default */
}

body {
    margin: 0;
    background-color: var(--dark-bg); /* Your preferred background */
    min-height: 100dvh;
    font-family: "JetBrains Mono", monospace;
    color: var(--light-text);
    /* overflow-y: auto; */
    display: flex; /* Make body a flex container */
    flex-direction: column; /* Stack children vertically */
    height: 100dvh; /* Fill the entire viewport height */
}

.header {
    display:sticky;
    top: 0;
    width: 100%;
    height: 50px; /* Fixed header height */
    background-color: var(--page-specific-header-bg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    flex-shrink: 0; /* Prevent header from shrinking */
}

/* Styling for the #home link within .header (previously in HTML inline <style>) */
#home {
    font-size: 10px;
    margin-left: 10px;
    margin-top:10px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--page-specific-link-color);
    text-decoration: underline;

}


#mainContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 10px;
    flex-grow: 1; /* Keep this to fill space */
    overflow: hidden; /* IMPORTANT: Change from 'auto' to 'hidden' */
    min-height: 0;
}

/* --- Info Section --- */
#info {
    text-align: left;
    width: 100%;
    max-width: var(--grid-effective-max-width);
    flex-shrink: 0; /* Prevent title area from shrinking */
}

h1 {
    font-weight: 400;
    margin-top: 0; /* Good practice if #info is first item */
    margin-bottom: 5px;
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    color: var(--light-text);
}

/* --- Grid Styling --- */
#gridContainerContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: var(--grid-effective-max-width);
    flex-grow: 1;   /* Make it take up all available vertical space */
    flex-shrink: 1; /* Allow it to shrink */
    min-height: 0;  /* Critical for flexbox sizing */
    overflow-y: auto; /* THIS is now the scrolling element */
}

#gridContainer {
    display: grid;
    grid-template-columns: repeat(var(--grid-size, 15), minmax(0, 1fr));
    grid-template-rows: repeat(var(--grid-size, 15), minmax(0, 1fr));
    gap: var(--grid-gap);
    border: var(--grid-border) solid var(--border-color);
    background-color: var(--border-color);
    width: 100%; /* Fill its container */
    height: auto; /* Height is determined by aspect ratio and width */
    aspect-ratio: 1 / 1; /* Maintain square aspect ratio */
    position: relative;
    touch-action: manipulation;
    max-width: 100%; /* Ensure grid scales down properly */
    max-height: 100%;/* Ensure grid scales down properly */
}

/* --- Block Styling --- */
.block {
    width: 100%;
    height: 100%;
    border-radius: 10%;
    background-color: var(--light-bg);
    cursor: pointer;
    transition: transform 0.1s ease-out, background-color 0.1s ease-out, box-shadow 0.1s ease-out;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    font-size: clamp(10px, calc(var(--block-size) * 0.55), 20px);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    color: var(--dark-text);
    text-transform: lowercase;
    user-select: none;
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
}

.block.black {
    background-color: var(--dark-block);
    cursor: default;
}

.block:not(.black):hover {
    transform: scale(1.05);
    z-index: 1;
    box-shadow: 0 0 8px color-mix(in srgb, var(--active-border) 50%, transparent);
}

.block.highlighted-clue {
    background-color: var(--highlight-bg);
    color: var(--highlight-text);
}
.block.focused-input {
    background-color: var(--active-bg);
    color: var(--active-text);
    box-shadow: inset 0 0 0 2px var(--active-border);
    z-index: 2;
}

.block-number {
    position: absolute;
    top: 1px;
    left: 3px;
    font-size: clamp(6px, calc(var(--block-size) * 0.3), 12px);
    line-height: 1;
    color: var(--border-color);
    font-weight: normal;
    z-index: 3;
    pointer-events: none;
}

.block.correct { color: var(--correct-text); }
.block.incorrect { color: var(--incorrect-text); }

/* --- Controls Containers --- */
#upperControlsContainer,
#controlsInfoContainer {
    width: 100%;
    max-width: var(--grid-effective-max-width);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0; /* Add this to prevent shrinking */
}

.control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--medium-bg);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    min-height: 45px;
}

.timer-container {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    color: var(--light-text);
    flex-shrink: 0;
}
#timer {
    font-weight: bold;
    color: var(--accent-color);
}

.action-icons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.icon-button {
    background: none;
    border: none;
    padding: 5px;
    margin: 0;
    cursor: pointer;
    color: var(--icon-color);
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-button:hover { color: var(--icon-hover-color); }
.icon-button svg { width: 24px; height: 24px; }


.clue-nav-row { gap: 10px; }
.clue-nav-row > .icon-button.nav-icon { flex-shrink: 0; }
.clue-nav-row > .icon-button.nav-icon svg { width: 20px; height: 20px; }

#clueDisplay {
    flex-grow: 1;
    flex-shrink: 1; /* Allow shrinking if space is tight */
    font-size: clamp(0.75rem, 2.2vw, 0.9rem);
    color: var(--light-text);
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0; /* Crucial for allowing flex item to shrink properly */
}
#currentClueInfo {
    font-weight: bold;
    color: var(--accent-color);
    margin-right: 5px;
}
#currentClueText {
    color: var(--light-text);
}

/* Status Message */
.status-message {
    margin-top: 5px;
    text-align: center;
    height: 1.5em; /* Or min-height if content can vary more */
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    color: var(--medium-text);
    width: 100%;
    max-width: var(--grid-effective-max-width);
    flex-shrink: 0;
}

/* Hidden Input Styling */
#hiddenInput {
    position: absolute; top: -9999px; left: -9999px; width: 1px; height: 1px;
    opacity: 0; pointer-events: none; border: none; padding: 0; margin: 0;
    background: transparent; color: transparent; outline: none; caret-color: transparent;
}

/* Confetti */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--confetti-color);
    opacity: 0.8;
    animation: confetti-fall 4s linear forwards;
    /* UPDATED: Ensure confetti is above the console and other UI elements */
    z-index: 2000;
}

@keyframes confetti-fall {
    0% { transform: translateY(-50px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(400px) rotate(360deg); opacity: 0; }
}

/* Console Styling */
#console {
    font-family: 'JetBrains Mono' , monospace;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 15vh; /* Use max-height to limit its growth */
    background-color: black;
    color: white;
    /* UPDATED: Ensures console is above most page content, but below confetti */
    z-index: 1001;
    padding: 10px;
    display: none;
    font-size: 0.8rem;
}
#console.show {
    display: block;
    overflow-y: auto;
}
.smaller{ /* This class is used for #logs inside #console */
    font-size: 0.7rem;
}

/* --- Media Query for very short screens (e.g., mobile keyboard open) --- */
@media (max-height: 550px) {
    .header { /* Hide the main site header to save crucial vertical space */
        display: none;
    }

    #mainContainer {
        padding: 5px;
        gap: 5px;
    }

    #info { /* Hide puzzle title area to save space */
        display: none;
    }

    .control-row {
        padding: 6px 10px; /* Tighter padding */
        min-height: 40px;  /* Reduced minimum height */
        gap: 8px;          /* Reduce gap between items within control rows */
    }

    #upperControlsContainer .action-icons {
        gap: 8px; /* Reduce gap for action icons like check/save */
    }
    .icon-button svg { /* Make icons in timer bar slightly smaller */
        width: 22px;
        height: 22px;
    }
     .clue-nav-row > .icon-button.nav-icon svg { /* Clue navigation icons even smaller */
         width: 18px;
         height: 18px;
    }

    #clueDisplay {
        font-size: clamp(0.7rem, 2vw, 0.8rem); /* Further reduce clue text size */
    }

    .status-message {
        font-size: clamp(0.7rem, 1.8vw, 0.8rem);
        height: 1.2em;
        margin-top: 3px; /* Reduce top margin */
    }

    #gridContainerContainer {
        flex-grow: 1;   /* Allow it to take up available vertical space */
        flex-shrink: 1; /* Allow it to shrink if needed */
        min-height: 0;  /* Essential for flex items to shrink below their intrinsic content size */
    }

    #console.show { /* When console is shown on small height viewport */
        max-height: 10vh; /* Make console even shorter */
        font-size: 0.7rem;
        padding: 5px;
    }
}

/* Optional: Even more aggressive for extremely short screens (e.g. < 450px height) */
@media (max-height: 450px) {
    .header{
        display: none; /* Hide header */
    }
    .control-row {
        min-height: 36px;
        padding: 4px 8px;
    }
    #upperControlsContainer .icon-button svg { /* Further shrink icons */
        width: 20px;
        height: 20px;
    }
    .clue-nav-row > .icon-button.nav-icon svg { /* And nav icons */
        width: 16px;
        height: 16px;
    }
    #clueDisplay {
        font-size: clamp(0.65rem, 1.9vw, 0.75rem); /* Smallest clue text */
    }
}