:root { --red: #e74c3c; --dark-red: #c0392b; }

/* Konteiner, mis hoiab mängu keskel ja piirab selle suurust */
#board {
	display: grid;
	gap: 10px;
	margin: 20px auto;
	justify-content: center;
	align-content: center;
	
	/* Vaikimisi (püsti ekraan) 4 veergu, 5 rida */
	grid-template-columns: repeat(4, min(20vw, 15vh, 250px));
}

/* Kui ekraan on laiupidi (arvuti või telefon külili) */
@media (orientation: landscape) {
	#board {
		/* 5 veergu, 4 rida */
		grid-template-columns: repeat(5, min(18vw, 15vh, 250px));
	}
}

/* Et sisu oleks alati keskel */
#game-view {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: calc(100vh - 200px);
	padding: 10px;
    box-sizing: border-box;
}

#game-view.hidden {display: none; min-height: 0;}

.card {
	aspect-ratio: 1 / 1;
	width: 100%;
	/* max-width on juba gridi 'min' funktsiooniga kaetud */
	perspective: 1000px;
	cursor: pointer;
}
/* Kaardi animatsioon */
.card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
.card.flipped .card-inner { transform: rotateY(180deg); }

.front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.back { background: var(--red); color: white; font-size: 2.5rem; border: 2px solid var(--dark-red); }
.front { background: white; transform: rotateY(180deg); overflow: hidden; }
.front img { width: 100%; height: 100%; object-fit: cover; }

/* Edetabel */
#leaderboard table { width: 80%; max-width: 600px; margin: 20px auto; border-collapse: collapse; }
#leaderboard th, #leaderboard td { padding: 10px; border-bottom: 1px solid #ddd; text-align: left;}
#me { background: #fff9c4; font-weight: bold; }