:root {
  --background: #f9f9f9;  /* Beyaz */
  --modal-background: white; /* Çok açık gri */
  --text-color: black; /* Koyu gri */
  --button-color: #007bff; /* Mavi */
}

[data-theme="dark"] {
  --background: #121212;  /* Çok koyu gri (Simsiyah genelde göz yorar) */
  --modal-background: #1e1e1e; /* Koyu gri */
  --text-color: #e0e0e0; /* Kırık beyaz */
  --button-color: #37a1ff; /* Mavinin daha açık tonu */
}

body {
    color: var(--text-color);
	font-family: sans-serif;
	background-color: var(--background);
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
}

.box {
    color: var(--text-color);
	background: var(--modal-background);
	padding: 2rem;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.modal {
    color: var(--text-color);
	background-color: var(--modal-background);     /* Arka plan rengi */
	border: 1px solid #ddd;
	border-radius: 8px;     /* Köşeleri yuvarlatma */
	padding: 20px;
	max-width: 600px;     /* Maksimum genişlik */
	font-family: sans-serif;
	line-height: 1.6;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);     /* Hafif gölge */
}

.site-settings {
    color: var(--text-color);
	/* Elemanı sayfa akışından bağımsız hareket ettirir */
	position: absolute;     /* Sayfanın en üstünden ve sağından ne kadar boşluk olacağını belirler */
	top: 10px;
	right: 10px;     /* Yazı ve kutucuğu yan yana ve ortalı hizalamak için */
	display: flex;
	align-items: start;
	flex-direction: column;
	gap: 5px;     /* Yazı ile kutu arasındaki boşluk */

	/* Görünüm ayarları (isteğe bağlı) */
	z-index: 3737;     /* Diğer öğelerin üstünde kalmasını sağlar */
}

#language-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

#darkmode-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

#darkmode-checkbox {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

#modal-settings {
	width: 70%;
}


/* 1. Listenin Kendisi (Dış Kapsayıcı) */
.settings-list {
	list-style-type: none;     /* Siyah noktaları kaldırır */
	padding: 0;     /* Soldaki varsayılan boşluğu sıfırlar */
	margin: 10px 0;     /* Üstten ve alttan biraz boşluk bırakır */
	display: flex;
	flex-direction: column;     /* Satırların ALT ALTA dizilmesini sağlar */
	gap: 10px;     /* Her satır arasına boşluk koyar */
	text-align: left;
}

/* 2. Her Bir Satır (Checkbox + Yazı Grubu) */
.settings-list li {
	display: flex;     /* İçindeki elemanları kontrol etmek için */
	flex-direction: row;     /* Checkbox ve Yazıyı YAN YANA getirir */
	align-items: center;     /* Dikeyde birbirine ortalar */
	justify-content: flex-start;     /* Sola yaslar */
}

/* 3. Etiket (Yazı) Ayarları */
.settings-list label {
	margin-left: 5px;     /* Checkbox ile yazı arasına mesafe koyar */
	cursor: pointer;     /* Yazının üzerine gelince el işareti çıkar */
	font-size: 16px;     /* Okunabilirliği artırır */
}

/* 4. Checkbox Ayarı (İsteğe bağlı boyutu büyütmek istersen) */
.settings-checkbox {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

/* Dış kapsayıcı: Yan yana dizer ve ortalar */
.counter-wrapper {
	display: flex;
	align-items: center;     /* Dikey ortalama */
	justify-content: flex-start;     /* Sola yaslı (istersen center yap) */
	gap: 15px;     /* Elemanlar arası boşluk */
	margin-top: 10px;
}

/* Buton Tasarımı */
.counter-btn {
	width: 35px;
	height: 35px;
	background-color: var(--button-color);     /* Senin mavi tema rengin */
	color: white;
	border: none;
	border-radius: 6px;     /* Hafif yuvarlak köşeler */
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
	display: flex;
	justify-content: center;     /* + ve - işaretini butonun ortasına alır */
	align-items: center;
	transition: background 0.2s;
}

.counter-btn:hover {
	background-color: #0056b3;     /* Hover efekti */
}

.counter-btn:active {
	transform: scale(0.95);     /* Tıklama hissi için ufak küçülme */
}

.player-name-container {
	display: flex;
	flex-direction: row;
	gap: 10px;
}
/* Ortadaki Sayı */
#counter-value {
	font-size: 18px;
	font-weight: bold;
	min-width: 25px;     /* Sayı 9'dan 10'a geçince butonlar kaymasın diye sabit genişlik */
	text-align: center;
}

button {
	background-color: var(--button-color);
	color: white;
	border: none;
	padding: 10px 20px 10px 20px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	margin-top: 0px;
}

button:hover {
	background-color: #0051a2;
}

#start-btn {
	padding: 12.5px 20px 12.5px 20px;
	text-align: center;
	flex: 1;
}

.tiklanabilir {
	color: var(--button-color);     /* Link gibi görünmesi için mavi yapabilirsin */
	text-decoration: underline;     /* Altını çizebilirsin */
	cursor: pointer;     /* EN ÖNEMLİSİ: Fare üzerine gelince el işareti çıkar */
	background: none;     /* Arka planı kaldır */
	border: none;     /* Çerçeveyi kaldır */
	padding: 0px;     /* İç boşluğu sıfırla */
	font: inherit;     /* Yazı tipini ve boyutunu üst elementten al */
	text-decoration: underline;     /* Altı çizili olsun (link gibi gözüksün) */
	background-color: transparent !important; /* Arka plan rengini kaldırır */
	/*font-weight: bold;  */
}

[data-theme="dark"] .tiklanabilir {
    color: #64b5f6; /* Açık pastel mavi */
}
[data-theme="dark"] .tiklanabilir:hover {
  color: #9be7ff; /* Daha da açık mavi */
}

.tiklanabilir:hover {
	color: darkblue; /* Üzerine gelince rengi koyulaşsın */
}

#version-text {
	position: fixed;   /* Pencereye göre sabitler */
	bottom: 0.3125rem; /* 1.25 * 16px = 20px */
    right: 0.3125rem;  /* 1.25 * 16px = 20px */
	font-size: 12px;
}

#version-closemodal {
	margin-top: 20px;
}
#changelog-container {
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
}
.button-container {
	display: flex;     /* İçindekileri yan yana dizer */
	justify-content: center;     /* Yatayda ortalar */
	align-items: center;     /* Dikey hizayı eşitler */
	gap: 10px;     /* İki buton arasına boşluk bırakır */
	margin-top: 20px;     /* Üstteki yazıdan biraz uzaklaştırır */
}
#modal-game {
	box-sizing: border-box;
	/*display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
  	*/
	width: 90%;
	height: 50%;
}
#game-btn {
	padding: 15px 30px;
}
#game-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 15px;
}
/*
li:hover {
	cursor: pointer;
	color: red;
}
*/