/* Çizim & Tahmin — oyun alanı stilleri */

.oyun-kolon {
  width: min(880px, 100vw);
  margin: 0 auto;
  padding: 0 var(--s3) var(--s8);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  position: relative;
  z-index: 1;
}

/* ---------- süre çubuğu ---------- */
.sure-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.sure-dolgu {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--altin-2), var(--altin-1));
  transition: width 0.25s linear, background 0.3s ease;
}
.sure-dolgu.az { background: linear-gradient(90deg, #e5586a, #ff8b9a); }

/* ---------- kelime şeridi ---------- */
.kelime-serit { padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 6px; }
.kelime-kutulari {
  display: flex; justify-content: center; gap: 5px; flex-wrap: wrap;
  min-height: 34px;
}
.harf-kutu {
  min-width: 24px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-bottom: 3px solid var(--altin-soft);
  font-size: 19px; font-weight: 800; color: var(--altin-1);
  text-transform: uppercase;
  padding: 0 2px;
}
.harf-kutu.bosluk { border-bottom-color: transparent; min-width: 14px; }

/* Tahminci için kelime alanı tıklanabilir (tahmin kutusunu açar) */
.kelime-kutulari.tiklanabilir { cursor: pointer; border-radius: var(--r-kucuk); }
.kelime-kutulari.tiklanabilir:hover .harf-kutu { border-bottom-color: var(--altin-1); }
.kelime-kutulari.tiklanabilir .harf-kutu { transition: border-color 0.15s ease; }

/* ---------- tahmin girişi (chat'ten ayrı) ---------- */
.tahmin-satir {
  display: flex; gap: var(--s2);
  padding-top: var(--s2);
}
.tahmin-satir .giris-alani {
  flex: 1;
  border-color: var(--altin-soft);
  background: rgba(217, 176, 76, 0.07);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.tahmin-satir #btn-tahmin { min-width: 56px; font-size: 18px; }
.tahmin-satir.yanlis-flas .giris-alani {
  animation: yanlisSalla 0.4s ease;
  border-color: rgba(229, 88, 106, 0.8);
}
@keyframes yanlisSalla {
  0%, 100% { translate: 0 0; }
  25% { translate: -6px 0; }
  50% { translate: 6px 0; }
  75% { translate: -4px 0; }
}
.tahmin-satir.yakin-flas .giris-alani {
  border-color: var(--altin-1);
  box-shadow: 0 0 0 3px rgba(217, 176, 76, 0.3);
}
.kelime-tam {
  font-size: 19px; font-weight: 800; color: var(--altin-1);
  letter-spacing: 1px; text-align: center;
}

/* ---------- oyuncu şeridi ---------- */
#oyuncu-serit {
  display: flex; gap: var(--s2);
  overflow-x: auto;
  padding-bottom: 2px;
}
.oyuncu-cip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cizgi-soluk);
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}
.oyuncu-cip.cizer-cip { border-color: var(--altin-soft); background: rgba(217, 176, 76, 0.08); }
.oyuncu-cip.bildi-cip { border-color: rgba(76, 208, 125, 0.5); }
.oyuncu-cip .cip-ad { font-size: 12px; font-weight: 800; white-space: nowrap; }
.oyuncu-cip .cip-puan { font-size: 11px; color: var(--soluk); font-weight: 700; }

/* ---------- tuval ---------- */
.tuval-kap {
  border-radius: var(--r-buyuk);
  overflow: hidden;
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge-panel);
  background: #fbf8f1;
  line-height: 0;
}
#tuval {
  width: 100%;
  height: auto;
  touch-action: none;
  cursor: crosshair;
}

/* ---------- araçlar ---------- */
#arac-panel { padding: var(--s3); }
.arac-satir { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.renkler { display: flex; gap: 6px; flex-wrap: wrap; }
.renk-secim {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.renk-secim.aktif {
  transform: scale(1.18);
  box-shadow: 0 0 0 3px rgba(217, 176, 76, 0.5);
}
.kalinliklar { display: flex; gap: 6px; align-items: center; }
.kalinlik-secim {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--cizgi-soluk);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.kalinlik-secim.aktif { border-color: var(--altin-2); }
.kalinlik-secim::after {
  content: "";
  border-radius: 50%;
  background: var(--murekkep);
  width: var(--boy); height: var(--boy);
}
#btn-silgi.aktif { border-color: var(--altin-2); box-shadow: 0 0 0 2px var(--altin-soft); }

/* ---------- kelime seçim modalı ---------- */
.kelime-secenek {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  min-height: 44px;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-orta);
  border: 1px solid var(--cizgi);
  background: #182642;
  color: var(--murekkep);
  font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
/* hover'da transform yasak (site kuralı) */
.kelime-secenek:hover { border-color: var(--altin-soft); background: #1e3054; }

/* ---------- final skor ---------- */
.final-satir {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-kucuk);
  background: rgba(255, 255, 255, 0.03);
}
.final-satir.birinci {
  background: rgba(217, 176, 76, 0.12);
  border: 1px solid var(--altin-soft);
}
.final-satir .final-ad { flex: 1; font-weight: 800; text-align: left; }
.final-satir .final-puan { font-weight: 800; color: var(--altin-1); }

/* ---------- seçim/highlight koruması ----------
   Hızlı çizim/dokunuşta tarayıcının metin seçimi (mavi highlight)
   oyun ekranında tamamen kapalı; yazı girişleri istisna. */
#oyun-ekrani {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#oyun-ekrani input,
#oyun-ekrani textarea {
  -webkit-user-select: text;
  user-select: text;
}