@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap');

/*
 * Revised CSS for a responsive layout
 * This version uses fluid units and modern CSS properties
 * to prevent horizontal scrollbars on small screens.
 */

 body {
    font-family: "PT Mono", monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f1dbaa;
    margin: 0;
    background-image: url("blackboard-learning-kids.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Prevent content from overflowing on very small screens */
    overflow-x: hidden;
}

button {
    font-family: "PT Mono", monospace;
    font-size: 0.77em !important;
}

input {
    font-family: "PT Mono", monospace;
    font-size: 0.87em !important;
    font-weight: 600;
}

.game-container {
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Adjust padding for responsiveness */
    padding: 10px;
    position: relative;
}

h1 {
    color: #333;
    font-size: 1.6em;
}

.controls {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    /* Stack controls on small screens to prevent overflow */
    flex-wrap: wrap;
}

#user-guess {
    padding: 8px;
    font-size: 1em;
    border: 2px solid #ccc;
    border-radius: 5px;
    text-align: center;
    /* Make input responsive */
    width: 200px;
    max-width: 100%;
    box-sizing: border-box;
}

button {
    padding: 10px 15px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#start-button {
    background-color: #4CAF50;
    color: white;
}

#start-button:hover {
    background-color: #45a049;
}

#check-button {
    background-color: #008CBA;
    color: white;
}

#check-button:hover {
    background-color: #007bb5;
}

/* --- Responsive Grid Container Styles --- */
.grid-container {
    display: grid;
    /* This is the key change: 11 columns for the labels + 10 for the grid */
    grid-template-columns: repeat(11, 1fr);
    /* 11 rows for the labels + 10 for the grid */
    grid-template-rows: repeat(11, 1fr);
    
    /* Use flexible units to prevent overflow */
    width: min(600px, 90vw); 
    aspect-ratio: 1 / 1; 
    border: 2px solid #333;
    background-color: #f9f9f9;
    /* Add margin to avoid touching screen edges */
    margin: 20px auto; 
    background-image: url("tablica-x-cover.png");
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
}

/* --- Responsive Grid Cell and Label Styles --- */
.grid-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ddd;
    /* Make font size responsive */
    font-size: clamp(0.5em, 2.5vw, 0.9em);
    font-weight: bold;
    color: #555;
    /* background-color: #e9e9e9; */
    background-color: transparent;
    /* Ensure no text wrapping inside cells */
    white-space: nowrap;
}

/* Style for the header labels */
.header-cell {
    background-color: #f0f0f0;
    font-weight: bold;
    color: #333;
}

/* A specific style for the top-left corner, which is an empty cell */
.empty-cell {
    background-color: transparent;
    border: none;
}

.grid-cell.highlighted {
    background-color: #ffeb3b;
    border: 2px solid #fbc02d;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
    transition: transform 0.2s ease-in-out;
}

.grid-cell.correct-answer {
    background-color: #8bc34a;
    color: white;
    animation: flashcorrect 1s forwards;
}

.grid-cell.wrong-answer {
    background-color: #f44336;
    color: white;
    animation: flashwrong 1s forwards;
}

@keyframes flashcorrect {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes flashwrong {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

.correct-answer {
    border: 4px solid #08CB00;
}

.wrong-answer {
    border: 4px solid #E4004B;
}

/* Media query for even smaller screens */
@media (max-width: 480px) {
    .controls {
        flex-direction: column;
        gap: 5px;
    }

    #user-guess {
        width: 100%;
    }

    .game-container {
        padding: 5px;
    }
}

#changeok:hover {
    transform: scale(1.1);
    transition: all 0.3s ease;
}

.audiokontrole img:hover {
    transform: scale(1.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

#feedbackrezultat {
    color: black;    
}