@import url('https://fonts.googleapis.com/css2?family=Playwrite+BE+WAL:wght@400&family=Roboto:wght@400&family=Pacifico&family=Comic+Neue:wght@400;700&family=Dancing+Script:wght@400;700&display=swap');

@font-face {
		font-family: 'ecriture_aromain_orne';
		src: url('/font/ecriturea-romain-orne-webfont.woff2') format('woff2'),
				 url('/font/ecriturea-romain-orne-webfont.woff') format('woff');
}

@font-face {
		font-family: 'ecriture_bromain_orne';
		src: url('/font/ecritureb-romain-orne-webfont.woff2') format('woff2'),
				 url('/font/ecritureb-romain-orne-webfont.woff') format('woff');
}
@font-face {
		font-family: 'cursifregular';
		src: url('/font/cursif__-webfont.woff2') format('woff2'),
				 url('/font/cursif__-webfont.woff') format('woff');
		font-weight: normal;
		font-style: normal;
}

#grid {
		display: grid;
		grid-template-columns: repeat(7, 50px);
		gap: 5px;
		justify-content: center;
		margin-top: 20px;
}

.cell {
    font-size: 1.5rem; /* Taille de base */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px solid black;
    cursor: pointer;
    transition: transform 0.2s;
    overflow: hidden; /* Empêche le débordement du texte */
    text-align: center;
    line-height: 1;
}

.selected {
		background-color: lightgreen;
		pointer-events: none;
}

.correct {
		background-color: lightgreen;
		pointer-events: none;
}

.wrong {
		background-color: red;
		animation: shake 0.3s;
}

@keyframes shake {
		0%, 100% { transform: translateX(0); }
		25% { transform: translateX(-5px); }
		50% { transform: translateX(5px); }
		75% { transform: translateX(-5px); }
}

#feedback {
		display: none;
		margin-top: 20px;
}