/* style.css for Suirodoku Game */

/* --- Global Resets and Base Styles --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Color Palette */
    --color-primary: #007bff; /* A nice, inviting blue */
    --color-primary-dark: #0056b3;
    --color-secondary: #6c757d;
    --color-background: #f8f9fa; /* Light, clean background */
    --color-surface: #ffffff;    /* For cards, grid background */
    --color-text: #212529;
    --color-text-muted: #6c757d;
    --color-border: #dee2e6;
    --color-border-strong: #adb5bd; /* For 3x3 block lines */
    --color-given: #343a40;      /* Pre-filled numbers/colors */
    --color-user-input: #007bff; /* User-entered numbers/colors */
    --color-selected-bg: #e6f2ff; /* Background for selected cell */
    --color-highlight-bg: #fff3cd; /* For highlighting peers or related cells */
    --color-error: #dc3545;

    /* Suirodoku Game Colors (for 'a' through 'i') */
    --suiro-color-a: #ff7675; /* Light Red/Pink */
    --suiro-color-b: #fab1a0; /* Light Orange */
    --suiro-color-c: #ffeaa7; /* Light Yellow */
    --suiro-color-d: #55efc4; /* Light Mint Green */
    --suiro-color-e: #74b9ff; /* Light Sky Blue */
    --suiro-color-f: #a29bfe; /* Light Purple/Lavender */
    --suiro-color-g: #fd79a8; /* Light Magenta/Pink */
    --suiro-color-h: #81ecec; /* Light Cyan */
    --suiro-color-i: #dfe6e9; /* Light Grey (distinct enough) */
    /* Text colors for contrast on the above backgrounds if used as cell bg */
    --suiro-text-on-a: #401a1a;
    --suiro-text-on-b: #503026;
    --suiro-text-on-c: #534923;
    --suiro-text-on-d: #154335;
    --suiro-text-on-e: #1b324d;
    --suiro-text-on-f: #28264c;
    --suiro-text-on-g: #521e35;
    --suiro-text-on-h: #1e4141;
    --suiro-text-on-i: #3b4144;


    /* Typography */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 1rem; /* Approx 16px */
    --font-size-large: 1.25rem;
    --font-size-small: 0.875rem;
    --font-size-cell-num: 1.8rem; /* Prominent numbers in cells */
    --font-size-cell-color-char: 0.9rem; /* Smaller color character */

    /* Spacing & Sizing */
    --spacing-unit: 0.5rem; /* 8px */
    --grid-max-width: 500px; /* Max width for the game grid */
    --control-panel-width: 280px;

    /* Borders & Shadows */
    --border-radius: 0.375rem; /* 6px */
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--spacing-unit) * 2);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.game-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: calc(var(--spacing-unit) * 3);
    text-align: center;
}

.suirodoku-app-container {
    display: flex;
    flex-wrap: wrap; /* Allow controls to wrap on smaller screens */
    gap: calc(var(--spacing-unit) * 4);
    justify-content: center;
    width: 100%;
    max-width: calc(var(--grid-max-width) + var(--control-panel-width) + var(--spacing-unit) * 8); /* Grid + Controls + Gap */
}

/* --- Suirodoku Grid Styling --- */
.suirodoku-grid-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.suirodoku-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    width: 100%;
    max-width: var(--grid-max-width);
    aspect-ratio: 1 / 1; /* Maintain square grid */
    border: 3px solid var(--color-border-strong);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
    box-shadow: var(--box-shadow);
    overflow: hidden; /* Ensures rounded corners clip children */
    cursor: pointer; /* Make the whole grid feel interactive */
}

.cell {
    position: relative; /* For positioning color character */
    display: flex;
    flex-direction: column; /* Stack number and color vertically */
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    transition: background-color 0.2s ease-in-out;
    user-select: none; /* Prevent text selection on click */
}

/* Thicker borders for 3x3 blocks */
.cell:nth-child(3n) { border-right-width: 3px; border-right-color: var(--color-border-strong); }
.cell:nth-child(9n) { border-right-width: 1px; border-right-color: var(--color-border); } /* Reset last cell in row */
/* For rows */
.suirodoku-grid > .cell:nth-child(n+19):nth-child(-n+27),
.suirodoku-grid > .cell:nth-child(n+46):nth-child(-n+54) {
    border-bottom-width: 3px;
    border-bottom-color: var(--color-border-strong);
}
/* Ensure the grid's main border takes precedence at edges */
.suirodoku-grid > .cell:nth-child(-n+9) { border-top-color: transparent; } /* Handled by grid border */
.suirodoku-grid > .cell:nth-child(9n+1) { border-left-color: transparent; } /* Handled by grid border */
.suirodoku-grid > .cell:nth-child(n+73) { border-bottom-color: transparent; } /* Handled by grid border */
.suirodoku-grid > .cell:nth-child(9n) { border-right-color: transparent; } /* Handled by grid border */


.cell .num-val {
    font-size: var(--font-size-cell-num);
    font-weight: 500;
    color: var(--color-user-input);
    line-height: 1; /* Crucial for centering and fitting */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 65%; /* Give more space to number */
}

.cell .color-char-display {
    font-size: var(--font-size-cell-color-char);
    font-weight: 700;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 35%; /* Smaller space for color char */
    opacity: 0.85;
}

/* Styling for given (pre-filled) values */
.cell.given .num-val,
.cell.given .color-char-display {
    color: var(--color-given);
    font-weight: 700; /* Bolder for givens */
}
.cell.given {
    background-color: #f0f0f0; /* Slightly different background for givens */
}


/* Cell States */
.cell:hover {
    background-color: var(--color-selected-bg);
}
.cell.selected {
    background-color: var(--color-primary-dark) !important; /* Stronger highlight */
    outline: 2px solid var(--color-primary-dark);
    z-index: 10;
}
.cell.selected .num-val,
.cell.selected .color-char-display {
    color: var(--color-surface); /* White text on dark selected background */
}

.cell.highlighted { /* For highlighting peers, rows, cols, blocks */
    background-color: var(--color-highlight-bg);
}
.cell.error {
    background-color: #ffebee; /* Light red for errors */
}
.cell.error .num-val,
.cell.error .color-char-display {
    color: var(--color-error);
}


/* Suirodoku Color Character Styling */
.color-char-display.color-a { color: var(--suiro-color-a); }
.color-char-display.color-b { color: var(--suiro-color-b); }
.color-char-display.color-c { color: var(--suiro-color-c); text-shadow: 0 0 1px var(--suiro-text-on-c); /* Yellow needs help */}
.color-char-display.color-d { color: var(--suiro-color-d); }
.color-char-display.color-e { color: var(--suiro-color-e); }
.color-char-display.color-f { color: var(--suiro-color-f); }
.color-char-display.color-g { color: var(--suiro-color-g); }
.color-char-display.color-h { color: var(--suiro-color-h); }
.color-char-display.color-i { color: var(--suiro-color-i); text-shadow: 0 0 1px var(--suiro-text-on-i); /* Light grey needs help */}


/* --- Controls & Palette Area --- */
.controls-palette-area {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
    width: 100%;
    max-width: var(--control-panel-width);
}

.control-panel,
.palette-panel {
    background-color: var(--color-surface);
    padding: calc(var(--spacing-unit) * 3);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.control-panel h3,
.palette-panel h3 {
    font-size: var(--font-size-large);
    color: var(--color-primary);
    margin-bottom: calc(var(--spacing-unit) * 2);
    text-align: center;
}

.difficulty-selector, .action-buttons {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.btn {
    display: inline-block;
    font-weight: 600;
    color: var(--color-surface);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    font-size: var(--font-size-base);
    border-radius: var(--border-radius);
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-decoration: none;
}

.btn:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn:active {
    transform: translateY(1px);
}

.btn.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.btn.btn-secondary:hover {
    background-color: #545b62;
    border-color: #545b62;
}

.palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
    gap: var(--spacing-unit);
}

.palette-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 1/1;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-large);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, transform 0.1s ease;
}
.palette-item:hover {
    background-color: var(--color-selected-bg);
    transform: scale(1.05);
}
.palette-item.selected {
    background-color: var(--color-primary);
    color: var(--color-surface);
    border-color: var(--color-primary-dark);
}

/* Palette item colors */
.palette-item.num-item { color: var(--color-user-input); }
.palette-item.color-item-a { background-color: var(--suiro-color-a); color: var(--suiro-text-on-a); }
.palette-item.color-item-b { background-color: var(--suiro-color-b); color: var(--suiro-text-on-b); }
.palette-item.color-item-c { background-color: var(--suiro-color-c); color: var(--suiro-text-on-c); }
.palette-item.color-item-d { background-color: var(--suiro-color-d); color: var(--suiro-text-on-d); }
.palette-item.color-item-e { background-color: var(--suiro-color-e); color: var(--suiro-text-on-e); }
.palette-item.color-item-f { background-color: var(--suiro-color-f); color: var(--suiro-text-on-f); }
.palette-item.color-item-g { background-color: var(--suiro-color-g); color: var(--suiro-text-on-g); }
.palette-item.color-item-h { background-color: var(--suiro-color-h); color: var(--suiro-text-on-h); }
.palette-item.color-item-i { background-color: var(--suiro-color-i); color: var(--suiro-text-on-i); }


/* --- Status Messages --- */
.status-message {
    margin-top: calc(var(--spacing-unit) * 2);
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius);
    text-align: center;
    font-weight: 500;
}
.status-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.status-message.error-msg { /* Renamed to avoid conflict with .cell.error */
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}


/* --- Responsive Design --- */
@media (max-width: 900px) { /* Adjust breakpoint as needed */
    .suirodoku-app-container {
        flex-direction: column;
        align-items: center;
    }
    .controls-palette-area {
        max-width: var(--grid-max-width); /* Match grid width */
        flex-direction: row; /* Palettes side-by-side if space */
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .control-panel, .palette-panel {
        flex-basis: 45%; /* Roughly half width for two columns */
        min-width: 250px; /* Ensure they don't get too small */
    }
}

@media (max-width: 600px) {
    body {
        padding: var(--spacing-unit);
    }
    .game-title {
        font-size: 2rem;
        margin-bottom: calc(var(--spacing-unit) * 2);
    }
    :root {
        --font-size-cell-num: 1.5rem;
        --font-size-cell-color-char: 0.75rem;
    }
    .controls-palette-area {
        flex-direction: column; /* Stack palettes on very small screens */
    }
     .control-panel, .palette-panel {
        flex-basis: 100%;
    }
    .btn {
        padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
        font-size: calc(var(--font-size-base) * 0.9);
    }
    .palette-grid {
        grid-template-columns: repeat(5, 1fr); /* More items per row on mobile */
    }
}

@media (max-width: 400px) {
    :root {
        --font-size-cell-num: 1.2rem;
        --font-size-cell-color-char: 0.65rem;
    }
     .palette-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}