html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body {
    margin-bottom: 60px;
}

.form-group {
    margin-bottom: 0.8em;
}

:root {
    --base-font-size: 4em; 
    --small-font-size: 2em;
    --smallest-font-size: 1em;

    --border-size: 6px; 
    --small-border-size: 4px;
    --smallest-border-size: 2px;

    --board-size: 700px;
    --grid-size: 3; 
}

.game-board {
    width: var(--board-size);
    height: var(--board-size);
    margin: 1em;
    background: linear-gradient(135deg, rgba(173, 216, 230, 0.7), rgba(70, 130, 180, 0.8)); 
    color: #fff;
    border: 6px solid #4682b4;
    border-radius: 15px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: grid;
    grid-template-columns: repeat(var(--grid-size), 1fr);
    grid-template-rows: repeat(var(--grid-size), 1fr);
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    padding: 1mm;
}

.board {
    border: var(--border-size) solid gray;
}

.grid {
    border: var(--border-size) solid #E80C0C;
}

.board, .grid {
    background: rgba(173, 216, 230, 0.4); 
    border-radius: 8px; 
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: inherit;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    font-size: var(--base-font-size);
    transition: all 0.3s ease-in-out; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    width: 100%; /* vota ara kui tahad muuta tyhjad kastid kriipsudeks */
    height: 100%; /* vota ara kui tahad muuta tyhjad kastid kriipsudeks */
}


.board:hover, .grid:hover {
    background: rgba(70, 130, 180, 0.6); 
    transform: scale(1.05); 
    box-shadow: 0 4px 8px rgba(70, 130, 180, 0.2); 
}


.grid:active, .board:active {
    transform: scale(1.1); 
    background: rgba(70, 130, 180, 0.5); 
}

#moveMaker {
    text-align: left;
    min-height: 100%; 
    display: flex; 
    justify-content: center;
    align-items: center;
    box-sizing: border-box; 
}

.badge {
    display: inline-block;
    padding: 0.5rem 1rem; 
    font-size: 1rem; 
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    color: white; 
    background: linear-gradient(123deg, #4682b4, #5a9bd4); 
    border-radius: 12px; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
    transition: all 0.3s ease-in-out; 
}

.badge:hover {
    transform: scale(1.05); 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 
    background: linear-gradient(123deg, #5a9bd4, #4682b4); 
}

.arrow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(3, 1fr);    
    gap: 0.5rem; 
    justify-content: center; 
    align-items: center; 
    width: fit-content; 
    margin: auto;
}

.arrow-btn {
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem; 
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(123deg, #DC143C, #FD0C0C); 
    color: #fff; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); 
    border: none; 
    transition: all 0.3s ease-in-out; 
}

.arrow-btn:hover {
    transform: scale(1.1); 
    box-shadow: 0 4px 8px rgba(240, 0, 0, 0.7); 
}

.arrow-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(240, 0, 0, 0.7); 
}

.grid.drag-over, .board.drag-over {
    background: rgba(70, 130, 180, 0.4); 
    transform: scale(1.05); 
}

@media (max-width: 945px) {
    :root {
        --board-size: 500px;
        --border: 3px;
    }

    .board, .grid {
        font-size: var(--small-font-size);
    }

    .grid {
        border: var(--small-border-size) solid #E80C0C;
    }

    .board {
        border: var(--small-border-size) solid gray;
    }

}

@media (max-width: 1200px) {
    #moveMaker {
        font-size: 35px;
    }
}

@media (max-width: 768px) {
    #moveMaker {
        font-size: 25px;
    }
}

@media (max-width: 510px) {
    :root {
        --board-size: 300px;
        --border: 1px;
    }

    .board, .grid {
        font-size: var(--smallest-font-size);
    }

    .grid {
        border: var(--smallest-border-size) solid #E80C0C;
    }

    .board {
        border: var(--smallest-border-size) solid gray;
    }

    .arrow-btn {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.25rem;
    }

    .empty-cell {
        width: 2.5rem;
        height: 2.5rem;
    }
}


.resume-btn, .pause-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    color: white;
    background: linear-gradient(123deg, #4682b4, #5a9bd4);
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
}

.resume-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    background: linear-gradient(123deg, #5a9bd4, #4682b4);
}

.pause-btn {
    background: linear-gradient(123deg, #DC143C, #FD0C0C); /* Matching red gradient */
}

.pause-btn:hover {
    box-shadow: 0 4px 8px rgba(240, 0, 0, 0.7);
}

.resume-btn:focus, .pause-btn:focus {
    outline: none; /* Removes the default outline */
    box-shadow: 0 0 0 0.25rem rgba(240, 0, 0, 0.7); /* Optional: Add a custom focus style */
}

.resume-btn:active, .pause-btn:active {
    outline: none; /* Removes the active outline */
}