#oyun_alani {
    position: relative;
    width: 95%;
	left: 40%;
	transform: translateX(-50%);
    max-width: 800px; /* Maksimum genişlik sınırı */
    margin: 0 auto;   /* Ortala */
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Cep telefonu veya tablet algılandığında her şeyi otomatik küçült */
@media screen and (max-width: 980px) {
    #oyun_alani {
        /* Ekran genişliğini 980'e bölüp tam sığacak şekilde ölçekle */
        transform: scale(calc(100vw / 980)); 
    }
}

girisEkrani
body {
    display: flex;
    justify-content: center;
    margin: 0;
}

#tablo2 img {
  margin-top:0%;  
  margin-left:0%;
  position: absolute; 
 }
 
#jerrypem, #jerrymav {
    width: 5%;
    position: absolute;
}

#yenile {
  top: 2578%; 
  left:0%;
  position: absolute;
 }

#tablo{  
  top: 0%; 
  left: 0%;
  position:absolute;
}
 
#cizgiust{  
  top: 2560%; 
  left: 0%;
  width:885px;
  height:5px;
  background-color:brown;  
  position:absolute;
}

#cizgiara {
 top: 3005%; 
 left: 0%;
 width:885px;
 height:10px;
 background-color:brown;  
 position:absolute;
}

#cizgison {  
  top: 3345%; 
  left: 0%;
  width:885px;
  height:10px;
  background-color:brown;  
  position:absolute;
}

#zar  { 
  top: 2580%; 
  left: 99%;
  position:absolute;
  cursor:pointer; 
}

#zarp { 
  top: 2580%; 
  left: 99%;
  position:absolute;
 cursor:pointer; 
}
#zarpemx { 
  top: 2580%; 
  left: 99%;
  position:absolute;
}

#zarpx { 
  top: 2580%; 
  left: 99%;
  position:absolute;
 cursor:pointer; 
}

#zarm { 
  top: 2580%; 
  left: 99%;
  position:absolute;
 cursor:pointer; 
}

#zarmavx { 
  top: 2580%; 
  left: 99%;
  position:absolute;
}

#zary { 
  top: 2580%; 
  left: 99%;
  position:absolute;
 cursor:pointer; 
}

#zars { 
  top: 2580%;  
  left: 99%;
  position:absolute;
 cursor:pointer; 
}

#atilanzarkutusu {
  top: 2580%; 
  left: 86%;
  position:absolute;
}
#atilanzarp {
  top: 2580%; 
  left: 86%;
  position:absolute;
}

#atilanzarm {
  top: 2580%; 
  left: 86%;
  position:absolute;
}

#atilanzary {
  top: 2580%; 
  left: 86%;
  position:absolute;
}

#atilanzars {
  top: 2580%; 
  left: 86%;
  position:absolute;
}

#jerrypem  { 
   top: 2400%;  
  left: 46%;
  position:absolute;
  cursor:pointer; 
}

#jerrypembe{ 
  top: 2400%;  
  left: 46%;
  position:absolute;
  cursor:pointer; 
}

#jerrypemx{ 
  top: 2400%;  
  left: 46%;
  position:absolute;
}

#jerrymav { 
  top: 2400%;  
  left: 56%;
  position:absolute;
  cursor:pointer; 
}

#jerrymavi{ 
   top: 2400%;  
  left: 56%;
  position:absolute;
  cursor:pointer; 
}

#jerrymavx{ 
  top: 2400%;  
  left: 56%;
  position:absolute;
}

#jerryyes { 
  top: 2400%;  
  left: 66%;
  position:absolute;
  cursor:pointer; 
}

#jerryyesil{ 
  top: 2400%;  
  left: 66%;
  position:absolute;
  cursor:pointer; 
}

#jerryyesx{ 
  top: 2400%;  
  left: 66%;
  position:absolute;
}

#jerrysar { 
   top: 2400%;  
  left: 76%;
  position:absolute;
  cursor:pointer; 
}

#jerrysari{ 
  top: 2400%;  
  left: 76%;
  position:absolute;
  cursor:pointer; 
}

#jerrysarx{ 
  top: 2400%;  
  left: 76%;
  position:absolute;
}

#peynir {   
  top: 120%; 
  left: 5%;
  position:absolute;
}

#zar1 { 
  top: 2620%; 
  left: 87.5%;
  position:absolute;
}

#zar2 {
  top: 2620%; 
  left: 87.5%;
  position:absolute;
}

#zar3 {
  top: 2620%; 
  left: 87.5%;
  position:absolute;
}

#zar4 {
  top: 2620%;
  left: 87.5%;
  position:absolute;
}

#zar5 {
   top: 2620%; 
  left: 87.5%;
  position:absolute;
}

#zar6 {
  top: 2620%;
  left: 87.5%;
  position:absolute;
}

 #jerryisec {
   margin-top:112%;  
   margin-left:-57%; 
   position:absolute;
 }

#arkadassec{  
  top: 2840%; 
  left: 44%;
  position:absolute;
}

#oyuncusayisi {
  top: 2400%; 
  left: 86.5%;
  position:absolute;
	}

#oyunsira {  
  top: 2590%; 
  left: 14%;
  position:absolute;
}


.patlama1{ 
  top: 680%; 
  left: 32%;
  position:absolute;
  width:350px;
  height:224px;
}

.patlama2{ 
  top: 680%; 
  left: 32%;
  position:absolute;
  width:350px;
  height:224px;
}

.patlama3{ 
  top: 680%; 
  left: 32%;
  position:absolute;
  width:350px;
  height:224px;
}

.patlama4{ 
   top: 680%; 
  left: 32%;
  position:absolute;
  width:350px;
  height:224px;
}

#pemson{ 
  top: 640%; 
  left: 25%;
  position:absolute;
  width:350px;
  height:224px;
}

#mavson{ 
  top: 640%; 
  left: 25%;
  position:absolute;
  width:350px;
  height:224px;
}

#yesson{ 
  top: 640%; 
  left: 25%;
  position:absolute;
  width:350px;
  height:224px;
}
#sarson{ 
  top: 640%; 
  left: 25%;
  position:absolute;
  width:350px;
  height:224px;
}

#secildi{ 
  top: 2820%; 
  left: 40%;
position:absolute;
}

#siraal{ 
  top: 2850%; 
  left: 35%;
position:absolute;
}

#baslat{  
  top: 2850%; 
  left: 32%;
  position:absolute;
}

#sesacik{ 
  top: 2840%; 
  left: 102%;
  position:absolute;
  cursor:pointer; 
}

#seskapali{ 
  top: 2840%; 
  left: 102%;
  position:absolute;
  cursor:pointer; 
}

#oyuncu1_1 {
	top: 2580%;  
	left: 88%;
	position:absolute;
	cursor:pointer;
}
#oyuncu1_2 {
   top: 2410%; 
  left: 102.8%;
  position:absolute;
}
#oyuncu2_1{
	top: 2580%;  
	left: 98%;
	position:absolute;
	cursor:pointer;
}
#oyuncu2_2{
   top: 2410%; 
  left: 102.8%;
  position:absolute;
}
#oyuncu3_1 {
	top: 2700%;  
	left: 93%;
	position:absolute;
	cursor:pointer;
}
#oyuncu3_2{
   top: 2410%; 
  left: 102.8%;
  position:absolute;
}
#oyuncu4_1 {
	top: 2700%;  
	left: 103%;
	position:absolute;
	cursor:pointer;
}
#oyuncu4_2{
   top: 2410%; 
  left: 102.8%;
  position:absolute;
}

#oynanan_oda {  
  top: 2850%; 
  left: 0%;
  width: 246px; 
  height: 55px; 
  background-color: grey;
  position: absolute;
  box-sizing: border-box;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center; 
  color: #1a1a1a;
  padding: 5px; 
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-style: italic;
  color: white;
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5);  
  border-radius: 25px;
  border: 4px solid black;
}
 #pembeisim_odasi {  
  top: 3040%; 
  left: 0%;
  width: 220px; 
  height: 55px; 
  background-color: #FF1493;
  position: absolute;
  box-sizing: border-box;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center; 
  color: #1a1a1a;
  padding: 5px; 
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-style: italic;
  color: white;
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5);  
  border-radius: 25px;
  border: 4px solid black;
}

#maviisim_odasi {  
  top: 3040%; 
  left: 28%;
  width: 220px; 
  height: 55px; 
  background-color: blue;
  position: absolute;
  box-sizing: border-box;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center; 
  color: #1a1a1a;
  padding: 5px; 
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-style: italic;
  color: white;
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5);  
  border-radius: 25px;
  border: 4px solid black;
}  
#yesilisim_odasi {  
  top: 3040%; 
  left: 56%;
  width: 220px; 
  height: 55px; 
  background-color: green;
  position: absolute;
  box-sizing: border-box;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center; 
  color: #1a1a1a;
  padding: 5px; 
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-style: italic;
  color: white;
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5);  
  border-radius: 25px;
  border: 4px solid black;
}
#sariisim_odasi {  
  top: 3040%; 
  left: 84%;
  width: 220px; 
  height: 55px; 
  background-color: yellow;
  position: absolute;
  box-sizing: border-box;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center; 
  color: #1a1a1a;
  padding: 5px; 
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-style: italic;
  color: black;
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5);  
  border-radius: 25px;
  border: 4px solid black;
}  
#pembe_pas {  
  top: 3200%; 
  left: 0%;
  width: 110px; 
  height: 50px; 
  background-color: #FF1493;
  position: absolute;
  box-sizing: border-box;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center; 
  color: #1a1a1a;
  padding: 5px; 
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-style: italic;
  color: white;
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5);  
  border-radius: 25px;
  border: 4px solid black;
  cursor:pointer;
}
  
#mavi_pas {  
  top: 3200%; 
  left: 28%;
  width: 110px; 
  height: 50px; 
  background-color: blue;
  position: absolute;
  box-sizing: border-box;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center; 
  color: #1a1a1a;
  padding: 5px; 
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-style: italic;
  color: white;
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5);  
  border-radius: 25px;
  border: 4px solid black;
  cursor:pointer;
}  
#yesil_pas {  
  top: 3200%; 
  left: 56%;
  width: 110px; 
  height: 50px; 
  background-color: green;
  position: absolute;
  box-sizing: border-box;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center; 
  color: #1a1a1a;
  padding: 5px; 
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-style: italic;
  color: white;
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5);  
  border-radius: 25px;
  border: 4px solid black;
  cursor:pointer;
}
#sari_pas {  
  top: 3200%; 
  left: 84%;
  width: 110px; 
  height: 50px; 
  background-color: yellow;
  position: absolute;
  box-sizing: border-box;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center; 
  color: #1a1a1a;
  padding: 5px; 
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-style: italic;
  color: black;
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5);  
  border-radius: 25px;
  border: 4px solid black;
  cursor:pointer;
}  
#pembe_cik {  
  top: 3200%; 
  left: 14%;
  width: 110px; 
  height: 50px; 
  background-color: #FF1493;
  position: absolute;
  box-sizing: border-box;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center; 
  color: #1a1a1a;
  padding: 5px; 
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-style: italic;
  color: white;
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5);  
  border-radius: 25px;
  border: 4px solid black;
  cursor:pointer;
}

#mavi_cik   {  
  top: 3200%; 
  left: 42%;
  width: 110px; 
  height: 50px; 
  background-color: blue;
  position: absolute;
  box-sizing: border-box;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center; 
  color: #1a1a1a;
  padding: 5px; 
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-style: italic;
  color: white;
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5);  
  border-radius: 25px;
  border: 4px solid black;
  cursor:pointer;
}  
#yesil_cik {  
  top: 3200%; 
  left: 70%;
  width: 110px; 
  height: 50px; 
  background-color: green;
  position: absolute;
  box-sizing: border-box;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center; 
  color: #1a1a1a;
  padding: 5px; 
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-style: italic;
  color: white;
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5);  
  border-radius: 25px;
  border: 4px solid black;
  cursor:pointer;
}
#sari_cik {  
  top: 3200%;  
  left: 98%;
  width: 110px; 
  height: 50px; 
  background-color: yellow;
  position: absolute;
  box-sizing: border-box;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center; 
  color: #1a1a1a;
  padding: 5px; 
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-style: italic;
  color: black;
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5);  
  border-radius: 25px;
  border: 4px solid black;
  cursor:pointer;
}  

#girisEkrani {
    top: 8%; 
    left: 0%;
    width: 120%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Arkadaki piyonlar dikkat dağıtmasın diye biraz koyulaştırdık */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#girisIcerik {
    position: absolute;
    top: 600%;            /* Yukarı-aşağı konumu (Sizin zevkinize göre) */
    left: 55%;
    transform: translateX(-50%);

    /* --- BURAYI AYARLAYABİLİRSİNİZ --- */
    width: 500px;        /* Blok dar geldiyse bu rakamı büyütün (Örn: 550px, 600px) */
    height: 720px;   /* İsterseniz minimum bir boy verebilirsiniz */
    /* -------------------------------- */

    background: #f1c40f; 
    padding: 10px;       /* İçerideki boşluk (Yazılar kenara çok değmesin) */
    border: 8px solid white;
    border-radius: 25px;
    text-align: center;
    box-sizing: border-box;
    z-index: 10000;
}
#girisIcerik input {
    width: 160%; 
    padding: 12px;
    margin: 8px 0;      /* Kutular arasında nefes payı bırakır */
    border-radius: 10px;
    border: 2px solid #ddd;
    box-sizing: border-box; /* Inputun kutudan taşmasını önler */
    font-size: 18px;
}

#baslatButon
{
    width: 80%;         /* Kutunun tam genişliğini al */
	height: 90px; 
    box-sizing: border-box;
    font-size: 32px;     /* Bir tık küçülttük ki sığsın */
    margin-top: 15px;
    padding: 15px;
    border: none;
    border-radius: 80px;
    cursor: pointer;
    font-weight: bold;
    color: white;
}

#tekliButon {
	width: 410px; 
	height: 80px; 
    box-sizing: border-box;
    font-size: 20px;     /* Bir tık küçülttük ki sığsın */
    margin-top: 15px;
    padding: 15px;
    border: none;
    border-radius: 80px;
    cursor: pointer;
    font-weight: bold;
    color: white;
}

#baslatButon {
    background: #27ae60; /* Yeşil */
}
#tekliButon {
    background: #e67e22; /* Turuncu */
}

/* OYUN İÇİ TABELALAR (1350px aşağıda duran o asil isimler) */
#kirmiziMisafirTabela, #maviMisafirTabela {
    position: absolute;
    /* 1350px yerine 'bottom' (alttan) veya 'top' (%) kullanalım */
    top: 85%;              /* Oyun alanının üstten %85'lik kısmına sabitle */
    width: 250px; 
    height: 55px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    line-height: 55px;
    border-radius: 15px;
    border: 4px solid gold;
    color: white;
    z-index: 10;           /* Oyunun altında kalmasın, üstte dursun */
}

/* KIRMIZI NEVA */
#kirmiziMisafirTabela {
    left: 15%;             /* Ekranın solundan %15 içeride */
    background-color: #FF1493;
}

/* MAVİ NİDA */
#maviMisafirTabela {
    right: 15%;            /* Ekranın sağından %15 içeride */
    background-color: #00BFFF;
}
#girisIcerik input {
    display: block;
    margin: 15px auto;
    padding: 20px; /* Kutunun içini de ferahlattım */
    width: 340px;  /* Kutuları biraz daha yaydım */
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #ddd;
    border-radius: 50px;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1), 
                0 4px 15px rgba(0,0,0,0.2);
    
    /* İSİMLER BURADA BÜYÜYOR */
    font-size: 36px; /* 24'ten 36'ya çıktı, artık çok net */
    font-family: 'Times New Roman', cursive;
    color: #333;
    transition: all 0.3s ease;
}
#odaAdi {
    margin: 60px; 
    width: 480px;
    background: rgba(255, 255, 255, 0.3);
    border: 3px dashed white;
    border-radius: 15px;
    padding: 15px;
     font-size: 34px;
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-style: italic;
    color: #2c3e50;
    text-align: center;
    outline: none;
}
#odaAdi::placeholder {
    color: rgba(44, 62, 80, 0.6);
    font-style: italic;
}
.oda-etiket {
    font-family: 'Times New Roman';
    font-size: 18px;
    color: #ffffff;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
#kirmiziMisafirTabela { margin-left: 230px; color: #FF1493; }
#maviMisafirTabela { margin-left: 530px; color: #00BFFF; }
#girisIcerik input:focus {
    outline: none;
    border-color: #f1c40f;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.5);
    transform: scale(1.02);
}
#pembeisim_giris {
    border-left: 28px solid #FF1493 !important; /* Renk hattını biraz daha belirginleştirdim */
}

#maviisim_giris {
    border-left: 28px solid #00BFFF !important;
}
#sarayTabelasi {
    margin: 20px auto;
    width: 90%;
    max-width: 600px;
    text-align: center;
    background: rgba(255, 255, 255, 0.1); /* Hafif şeffaf zemin */
    padding: 15px;
    border-radius: 20px;
}

.oda-bilgi {
    font-size: 18px;
    color: #eee;
    font-family: 'Times New Roman';
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.isim-kutusu {
    font-family: 'Times New Roman';
    font-size: 45px; /* İsimler dev gibi ve okunaklı */
    padding: 5px 20px;
    display: inline-block;
}

.pembe-hat { color: #FF1493; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.mavi-hat { color: #00BFFF; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }

.ve-ayracı {
    font-size: 30px;
    color: white;
    margin: 0 15px;
    vertical-align: middle;
}
#tekliButon {
    background: #2980b9; 
    color: white;
    border: none;
    padding: 22px 25px;
    font-size: 28px; 
    border-radius: 50px;
    cursor: pointer;
    top: 20px; left: 10px;
    font-family: 'Times New Roman', cursive;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
#sira1 {
	top: 2580%; 
	left: 46%; 
	position: absolute; 
}
#sira2 {
	top: 2580%; 
	left: 56%; 
	position: absolute; 
}
#sira3 {
	top: 2580%; 
	left: 66%; 
	position: absolute; 
}
#sira4 {
	top: 2580%; 
	left: 76%; 
	position: absolute; 
}
#onayp {
	top: 2700%; 
	left: 46%; 
	position: absolute; 
}
#onaym {
	top: 2700%; 
	left: 56%; 
	position: absolute; 
}
#onayy {
	top: 2700%; 
	left: 66%; 
	position: absolute; 
}
#onays {
	top: 2700%; 
	left: 76%; 
	position: absolute; 
}