body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    background-color: rgb(241, 233, 214); /* Updated background color */
}

#board-container {
    position: relative; /* Keep for potential future absolute positioning needs */
    width: 450px; /* Board width (400px) + 2 * label space (25px) */
    height: 450px; /* Board height (400px) + 2 * label space (25px) */
    margin: 20px auto; /* Center the container */
    background-color: white; /* Make the background white */
    border: 1px solid #ddd; /* Add a subtle border */
    border-radius: 8px;
    display: grid;
    /* Define grid for labels and board with equal spacing */
    grid-template-columns: 25px 400px 25px; /* Left space | Board | Right space */
    grid-template-rows: 25px 400px 25px;    /* Top space | Board | Bottom space */
    align-items: center; /* Center items vertically within their grid cell */
    justify-items: center; /* Center items horizontally within their grid cell */
    box-sizing: border-box; /* Include border in width/height */
    padding: 0; /* Remove previous padding, grid handles spacing */
}

#board {
    grid-column: 2 / 3; /* Place board in the center column */
    grid-row: 2 / 3;    /* Place board in the center row */
    /* Keep existing board styles */
    width: 400px;
    height: 400px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    border: 2px solid #333;
}

#rank-labels {
    grid-column: 1 / 2; /* Place ranks in the first column */
    grid-row: 2 / 3;    /* Place ranks in the middle row (aligned with board) */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    height: 100%; /* Make it fill the grid cell height */
    width: 100%; /* Make it fill the grid cell width */
}

#file-labels {
    grid-column: 2 / 3; /* Place files in the middle column (aligned with board) */
    grid-row: 3 / 4;    /* Place files in the bottom row */
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    width: 100%; /* Make it fill the grid cell width */
    height: 100%; /* Make it fill the grid cell height */
}

.square {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Stacking context for pseudo-elements and img */
    /* Removed background-size, background-repeat, background-position */
}

.piece-img {
    display: block;
    width: 90%; /* Adjust size as needed */
    height: 90%;
    object-fit: contain; /* Scale piece nicely */
    position: relative; /* Keep in flow, manage stacking with z-index */
    z-index: 3; /* Lower than the possible-move dot */
    pointer-events: none; /* Prevent img from interfering with square clicks */
}

.light {
    background-color: #f0d9b5;
}

.dark {
    background-color: #b58863;
}

.selected {
    background-color: rgba(173, 216, 230, 0.5); /* Light blue background */
    box-sizing: border-box; /* Ensure border doesn't increase size */
}

/* Remove the previous simple background-color rule for .last-move-highlight */
/* .last-move-highlight {
    background-color: rgba(173, 216, 230, 0.6); 
}
*/

/* Apply highlight using a background layer on top of the existing color */
.last-move-highlight {
    /* Add a semi-transparent light blue layer ON TOP of the existing background-color */
    /* The background-color from .light or .dark will still be the base */
    position: relative; /* Needed for pseudo-element */
}

.last-move-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(173, 216, 230, 0.5); /* Semi-transparent light blue */
    z-index: 1; /* Highlight layer below piece, above square background */
    pointer-events: none; /* Allow clicks to pass through to the square */
}

.possible-move::after {
    content: '';
    position: absolute;
    /* Center the dot */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px; /* Size of the dot */
    height: 15px;
    background-color: rgb(173, 216, 230); /* Solid light blue dot (no transparency) */
    border-radius: 50%;
    z-index: 4; /* Higher than piece-img to appear above it */
    pointer-events: none;
}

#puzzle-info {
    margin-top: 20px;
    text-align: center;
}

.result-message {
    font-size: 1.5em;
    font-weight: bold;
    margin: 15px 0;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

.success {
    background-color: rgba(76, 175, 80, 0.2);
    color: #2e7d32;
    border: 1px solid #2e7d32;
}

.failure {
    background-color: rgba(244, 67, 54, 0.2);
    color: #c62828;
    border: 1px solid #c62828;
}

button {
    background-color: #58CC02; /* Duolingo green */
    color: white;
    font-weight: bold;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 0 #58A700; /* Darker green for 3D effect */
    cursor: pointer;
    transition: all 0.1s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 10px 5px;
}

button:hover {
    background-color: #61E002;
    transform: translateY(-2px);
}

button:active {
    background-color: #58CC02;
    box-shadow: 0 1px 0 #58A700;
    transform: translateY(3px);
}

#reset-button {
    background-color: #FF9600; /* Orange for Try Again */
    box-shadow: 0 4px 0 #CC7900;
}

#reset-button:hover {
    background-color: #FFB52E;
}

#reset-button:active {
    box-shadow: 0 1px 0 #CC7900;
}

#hint-button {
    display: block;
    margin: 5px auto 10px; /* Less top and bottom margin */
    background-color: transparent;
    color: #1899D6;
    font-weight: bold;
    font-size: 16px;
    padding: 3px 10px; /* Slim vertical padding */
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s ease; /* Only transition the color, not position or other properties */
    transform: none; /* Ensure no transform is applied by default */
}

#hint-button:hover {
    color: #55C1F5;
    transform: none; /* Explicitly prevent transform on hover */
}

#hint-button:active {
    box-shadow: none;
    transform: none; /* Ensure no transform on active state */
}

/* Cat Avatar and Speech Bubble */
#cat-hint-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 450px; /* Match the board-container width */
    width: 100%; /* Take full available width */
    margin: 20px auto;
    background-color: #f5f7fa; /* Light gray-blue color, previously used for speech bubble */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px; /* Uniform padding */
    box-sizing: border-box;
    height: auto; /* Allow container to size naturally */
    min-height: 170px; /* Minimum height for both mobile and desktop */
}

.cat-speech-container {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 5px; /* Reduce bottom margin */
    padding: 0 5px; /* Add a small padding to prevent elements from touching the edge */
    height: 110px; /* Fixed height for speech container */
    min-height: 110px; /* Enforce minimum height */
    max-height: 110px; /* Enforce maximum height */
    box-sizing: border-box; /* Include padding in height calculation */
}

.button-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    min-height: 40px; /* Always reserve space for the button */
    position: relative; /* For absolute positioning of the button if needed */
    padding-bottom: 5px; /* Reduced padding at bottom */
    align-items: flex-start; /* Align items to the top */
}

#cat-avatar {
    width: 70px;
    height: 70px;
    background-image: url('/public/img/sheet.avif');
    background-position: 0% 100%; /* First frame (0%), last row (100% = 7/7) */
    background-size: 400% 700%; /* 4 columns, 7 rows */
    background-repeat: no-repeat;
    border-radius: 10px; /* Rounded corners instead of circle */
    border: 1px solid #8EB1C7; /* Thinner 1px border */
    flex-shrink: 0;
    animation: cat-blink 4s steps(1) infinite;
}

@keyframes cat-blink {
    0%, 90% {
        background-position: 0% 100%; /* First frame - default state (eyes open) */
    }
    91%, 95% {
        background-position: 33.33% 100%; /* Second frame - blink (eyes closed) */
    }
    96%, 100% {
        background-position: 0% 100%; /* Back to first frame (eyes open) */
    }
}

#speech-bubble {
    position: relative;
    background-color: white;
    border-radius: 12px;
    padding: 15px;
    font-size: 16px;
    box-shadow: none;
    border: none;
    flex-grow: 1;
    height: 90px; /* Precise fixed height */
    min-height: 90px; /* Matching min-height to fixed height */
    max-height: 90px; /* Adding max-height to enforce fixed size */
    overflow-y: auto; /* Allow scrolling if text is too long */
    box-sizing: border-box; /* Include padding in height calculation */
    display: flex; /* Use flexbox for better content alignment */
    align-items: center; /* Center content vertically */
}

#speech-bubble:before {
    content: "";
    position: absolute;
    left: -10px;
    top: 20px;
    border-width: 10px 15px 10px 0;
    border-style: solid;
    border-color: transparent white transparent transparent;
    z-index: 1;
}

#speech-bubble:after {
    display: none; /* Remove the outer border triangle */
}

#hint-text {
    margin: 0;
    font-style: normal; /* Change from italic to normal */
    color: #333;
    white-space: pre-line; /* This ensures newlines are respected */
}

.cat-success {
    background-position: 100% 100% !important; /* Last frame (100%, 4th column), last row (100% = 7/7) */
    animation: none !important; /* Stop the blinking animation */
}

#social-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 12px auto 0;
    width: 100%;
    max-width: 450px;
    justify-items: stretch;
}

.social-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid #cfd8e3;
    color: #1f2a44;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

.social-button img {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    flex-shrink: 0;
}

.social-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(31, 42, 68, 0.12);
}

.social-button:active {
    transform: translateY(0);
    box-shadow: none;
}

@media (max-width: 520px) {
    #social-links {
        grid-template-columns: 1fr;
    }
}

/* Media query for screens smaller than 900px */
@media (max-width: 900px) {
    body {
        margin: 0; /* Remove body margin for true edge to edge */
        padding-top: 0; /* Remove any top padding */
        display: flex;
        flex-direction: column; /* Normal column direction */
    }

    /* Reorder the main containers using flexbox order */
    #board-container {
        width: 100%; /* Use full width of screen */
        height: auto; /* Let height be determined by content */
        margin: 0; /* Remove all margin for edge-to-edge */
        border-radius: 0; /* Remove rounded corners */
        padding: 0; /* Remove padding */
        border: none; /* Remove border */
        display: block; /* Change from grid to block layout */
        order: 2; /* Show board after cat */
    }

    #cat-hint-container {
        max-width: 100%; /* Full width */
        margin: 0; /* Remove all margins */
        border-radius: 0; /* Remove rounded corners */
        border-left: none; /* Remove left border */
        border-right: none; /* Remove right border */
        order: 1; /* Show cat before board */
        height: 170px; /* Fixed height for mobile */
        min-height: 170px; /* Matching min-height */
        max-height: 170px; /* Matching max-height */
    }

    #social-links {
        width: 100%;
        max-width: 100%;
        margin-top: 15px;
        padding: 0 16px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        box-sizing: border-box;
    }

    /* Move puzzle info to the middle */
    #puzzle-info {
        order: 3;
        margin: 10px 0;
    }

    #board {
        width: 100%; /* Full width */
        height: auto; /* Maintain aspect ratio */
        aspect-ratio: 1 / 1; /* Ensure board remains square */
        border: none; /* Remove the board border for edge-to-edge design */
    }

    #rank-labels, #file-labels {
        display: none; /* Hide rank and file labels on small screens */
    }

    .square {
        width: auto; /* Let grid determine width */
        height: auto; /* Let grid determine height */
    }
}