/* Öğrenci Çalışma Alanı - 2 kişilik kelime oyunu motoru.
   sunu/unit6/vocabulary/wordgame.html'deki oyunun aynı mantığı; görsel yerine
   Türkçe kelime metni, alt bar (tam ekran/yakınlaştırma/çizim/saat) yok. */

.game-area {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Oyuncu panelleri ── */
.game-player-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.game-player-a { border-right: 3px solid #E8EAF6; background: #F5F6FF; }
.game-player-b { border-left: 3px solid #FFEBEE; background: #FFF8F8; }

.game-player-header {
  padding: 14px 16px 10px;
  text-align: center;
  border-bottom: 2px solid rgba(0,0,0,0.05);
  flex-shrink: 0;
}
.game-player-name { font-size: 18px; font-weight: 900; margin-bottom: 6px; }
.game-player-a .game-player-name { color: #1a237e; }
.game-player-b .game-player-name { color: #b71c1c; }

.game-score-display { font-size: 52px; font-weight: 900; line-height: 1; transition: transform 0.15s; }
.game-player-a .game-score-display { color: #3949AB; }
.game-player-b .game-score-display { color: #E53935; }
.game-score-display.bump { transform: scale(1.18); }

.game-score-label {
  font-size: 11px; font-weight: 700; color: #aaa;
  letter-spacing: 1px; text-transform: uppercase; margin-top: 2px;
}

.game-options-grid { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px; }

.game-opt-btn {
  flex: 1;
  border-radius: 12px;
  font-size: 19px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.12s, opacity 0.2s;
  text-align: center;
  padding: 8px 10px;
  line-height: 1.3;
  border: 2.5px solid transparent;
}
.game-player-a .game-opt-btn { background: #E8EAF6; color: #1a237e; border-color: #C5CAE9; }
.game-player-b .game-opt-btn { background: #FFEBEE; color: #b71c1c; border-color: #FFCDD2; }

.game-opt-btn.correct {
  background: #C8E6C9 !important; color: #1B5E20 !important;
  border-color: #66BB6A !important; transform: scale(1.04) !important;
}
.game-opt-btn.wrong {
  background: #FFCDD2 !important; color: #B71C1C !important;
  border-color: #EF9A9A !important; opacity: 0.6; cursor: default;
}
.game-opt-btn:disabled:not(.correct):not(.wrong) { opacity: 0.35; cursor: default; }
.game-opt-btn:disabled { cursor: default; }

/* ── Orta panel ── */
.game-center-panel {
  flex: 1.3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #FAFAFA;
  padding: 16px;
  position: relative;
  min-width: 0;
}

.game-q-counter {
  position: absolute; top: 12px;
  font-size: 13px; font-weight: 700; color: #bbb; letter-spacing: 1px;
}

.game-center-word {
  display: none;
  max-width: 92%;
  text-align: center;
  font-size: clamp(28px, 6vw, 68px);
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1.25;
  overflow-wrap: break-word;
  opacity: 0;
  padding: 18px 34px;
  border-radius: 22px;
  transition: opacity 0.3s, background-color 0.3s;
}

/* ── Başlangıç ekranı ── */
.game-start-screen { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.game-start-icon-img { max-width: 90%; max-height: 220px; border-radius: 16px; box-shadow: 0 4px 18px rgba(0,0,0,0.13); }
.game-start-title { font-size: 26px; font-weight: 900; color: #4d4d4d; }
.game-start-sub { font-size: 14px; color: #888; font-weight: 600; max-width: 480px; }
.game-q-select { display: flex; gap: 12px; }
.game-q-select-btn {
  font-size: 17px; font-weight: 800;
  padding: 11px 26px; border-radius: 12px;
  border: 3px solid #C5CAE9; background: #E8EAF6; color: #1a237e;
  cursor: pointer; font-family: inherit; transition: all 0.18s;
}
.game-q-select-btn.selected { background: #3949AB; color: #fff; border-color: #3949AB; }
.game-start-btn {
  font-size: 22px; font-weight: 900;
  padding: 16px 52px; border-radius: 14px; border: none;
  background: #3949AB; color: #fff;
  cursor: pointer; font-family: inherit; transition: all 0.18s;
  box-shadow: 0 4px 18px rgba(57,73,171,0.32);
}
.game-start-btn:disabled {
  background: #B0B7D8; color: #eee; cursor: default;
  box-shadow: none; transform: none;
}

/* ── Sonuç ekranı ── */
.game-result-screen { display: none; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.game-winner-badge { font-size: 64px; line-height: 1; }
.game-winner-text { font-size: 28px; font-weight: 900; color: #4d4d4d; }
.game-result-scores { display: flex; gap: 16px; }
.game-rsb { border-radius: 14px; padding: 14px 22px; text-align: center; min-width: 110px; }
.game-rsb-name { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.game-rsb-pts { font-size: 40px; font-weight: 900; }
.game-rsb-a { background: #E8EAF6; color: #1a237e; }
.game-rsb-b { background: #FFEBEE; color: #b71c1c; }
.game-rsb.winner-glow { box-shadow: 0 0 0 3px #FFD600, 0 6px 20px rgba(255,214,0,0.4); }
.game-play-again-btn {
  font-size: 17px; font-weight: 800;
  padding: 12px 32px; border-radius: 12px; border: none;
  background: #3949AB; color: #fff;
  cursor: pointer; font-family: inherit; transition: all 0.18s;
}

/* ── Geri bildirim katmanı ── */
.game-feedback-overlay {
  position: absolute; inset: 0;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  font-size: 56px; font-weight: 900; z-index: 10; pointer-events: none; gap: 8px;
}
.game-feedback-pts { font-size: 28px; font-weight: 800; opacity: 0.85; }

@media (max-width: 700px) {
  .game-area { flex-direction: column; }
  .game-player-a { border-right: none; border-bottom: 3px solid #E8EAF6; }
  .game-player-b { border-left: none; border-top: 3px solid #FFEBEE; }
  .game-opt-btn { font-size: 13px; }
  .game-start-icon-img { max-height: 130px; }
}

/* Sadece gerçek fare/hover destekli cihazlarda uygulanır: dokunmatik
   ekranlarda (telefon, akıllı tahta) dokunuş sonrası hover durumu "yapışık"
   kalıp bir önceki tıklanan seçeneğin rengi bir sonraki soruda da görünüyordu. */
@media (hover: hover) and (pointer: fine) {
  .game-player-a .game-opt-btn:hover:not(:disabled) { background: #C5CAE9; transform: scale(1.02); }
  .game-player-b .game-opt-btn:hover:not(:disabled) { background: #FFCDD2; transform: scale(1.02); }
  .game-q-select-btn:hover { transform: translateY(-2px); }
  .game-start-btn:hover:not(:disabled) { background: #1a237e; transform: translateY(-2px); }
  .game-play-again-btn:hover { background: #1a237e; transform: translateY(-2px); }
}