/* ═══════════════════════════════════════════
   SATRANÇ OYUNU — CSS
   ozeldersal.tr tema renk paleti ile uyumlu
   --navy: #1A2340 / --yellow: #FDB750
   ═══════════════════════════════════════════ */

:root {
  --sdr-navy:        #1A2340;
  --sdr-navy-mid:    #2C3E6B;
  --sdr-yellow:      #FDB750;
  --sdr-yellow-lt:   #FFDD57;
  --sdr-yellow-pale: #FFF8E7;
  --sdr-white:       #FFFFFF;
  --sdr-gray-light:  #F5F7FA;
  --sdr-gray-mid:    #E8ECF2;
  --sdr-gray-text:   #555E7A;
  --sdr-green:       #2ECC71;
  --sdr-red:         #E74C3C;
  --sdr-radius:      16px;
  --sdr-radius-sm:   10px;
  --sdr-shadow:      0 4px 24px rgba(26,35,64,.12);
  --sdr-shadow-lg:   0 12px 48px rgba(26,35,64,.18);
  --sdr-transition:  .2s ease;

  /* Tahta renkleri */
  --sq-light: #F0D9B5;
  --sq-dark:  #B58863;
  --sq-sel:   rgba(253,183,80,.75);
  --sq-legal: rgba(253,183,80,.45);
  --sq-last:  rgba(205,210,106,.6);
  --sq-check: rgba(231,76,60,.75);
  --sq-cap:   rgba(231,76,60,.35);
  --sq-hover: rgba(253,183,80,.25);
}

/* ─── GENEL ────────────────────────────── */

.sdr-chess-app {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color:        var(--sdr-navy);
  max-width:    1100px;
  margin:       0 auto;
  padding:      20px 0;
}

/* ─── MOD SEKMELERI ─────────────────────── */

.sdr-mode-tabs {
  display:        flex;
  gap:            8px;
  margin-bottom:  20px;
  border-bottom:  2px solid var(--sdr-gray-mid);
  padding-bottom: 0;
}

.sdr-mode-tab {
  padding:       12px 24px;
  border:        none;
  background:    transparent;
  font-family:   inherit;
  font-size:     14px;
  font-weight:   600;
  color:         var(--sdr-gray-text);
  cursor:        pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition:    color var(--sdr-transition), border-color var(--sdr-transition);
}
.sdr-mode-tab:hover               { color: var(--sdr-navy); }
.sdr-mode-tab--active             { color: var(--sdr-navy); border-bottom-color: var(--sdr-yellow); }

/* ─── OYUN ALANI ────────────────────────── */

.sdr-chess-wrap {
  background:    var(--sdr-white);
  border-radius: var(--sdr-radius);
  box-shadow:    var(--sdr-shadow-lg);
  overflow:      hidden;
}

.sdr-status-bar {
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         14px 20px;
  background:      var(--sdr-navy);
  color:           var(--sdr-white);
  min-height:      50px;
}

.sdr-status-indicator {
  width:         12px;
  height:        12px;
  border-radius: 50%;
  flex-shrink:   0;
  transition:    background var(--sdr-transition);
}
.sdr-status-indicator--white    { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
.sdr-status-indicator--black    { background: #333; box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
.sdr-status-indicator--check    { background: var(--sdr-red); animation: sdr-pulse 1s infinite; }
.sdr-status-indicator--gameover { background: var(--sdr-yellow); }
.sdr-status-indicator--thinking { background: var(--sdr-yellow); animation: sdr-pulse .8s infinite; }

@keyframes sdr-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

.sdr-status-text {
  font-size:   14px;
  font-weight: 600;
  flex: 1;
}

.sdr-game-area {
  display:  flex;
  gap:      0;
  min-height: 580px;
}

/* ─── YAN PANELLER ──────────────────────── */

.sdr-side-panel {
  width:     220px;
  flex-shrink: 0;
  padding:   20px 16px;
  background: var(--sdr-gray-light);
  border-right: 1px solid var(--sdr-gray-mid);
  overflow-y: auto;
}
.sdr-side-panel--right {
  border-right: none;
  border-left:  1px solid var(--sdr-gray-mid);
}

.sdr-panel-title {
  font-size:     11px;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color:         var(--sdr-gray-text);
  margin-bottom: 12px;
}

.sdr-panel-label {
  font-size:     12px;
  font-weight:   600;
  color:         var(--sdr-navy);
  margin-bottom: 8px;
  margin-top:    16px;
}

/* ─── HAMLE LISTESI ─────────────────────── */

.sdr-move-list {
  font-size:   13px;
  overflow-y:  auto;
  max-height:  420px;
}

.sdr-move-row {
  display:    flex;
  gap:        6px;
  align-items: center;
  padding:    4px 6px;
  border-radius: 6px;
}
.sdr-move-row:nth-child(odd) { background: var(--sdr-gray-mid); }

.sdr-move-num {
  color:      var(--sdr-gray-text);
  font-size:  12px;
  min-width:  24px;
}
.sdr-move-san {
  flex:       1;
  font-weight: 500;
  cursor:     default;
}

/* ─── ZORLUK BUTONLARI ──────────────────── */

.sdr-difficulty-btns,
.sdr-color-btns {
  display: flex;
  gap:     6px;
  flex-wrap: wrap;
}

.sdr-diff-btn {
  flex:          1;
  padding:       7px 10px;
  border:        1.5px solid var(--sdr-gray-mid);
  border-radius: 8px;
  background:    var(--sdr-white);
  font-size:     12px;
  font-weight:   600;
  font-family:   inherit;
  cursor:        pointer;
  transition:    all var(--sdr-transition);
  color:         var(--sdr-gray-text);
}
.sdr-diff-btn:hover          { border-color: var(--sdr-yellow); color: var(--sdr-navy); }
.sdr-diff-btn--active        { background: var(--sdr-navy); color: var(--sdr-white); border-color: var(--sdr-navy); }

.sdr-color-btn {
  flex:          1;
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       7px 10px;
  border:        1.5px solid var(--sdr-gray-mid);
  border-radius: 8px;
  background:    var(--sdr-white);
  font-size:     12px;
  font-weight:   600;
  font-family:   inherit;
  cursor:        pointer;
  transition:    all var(--sdr-transition);
  color:         var(--sdr-gray-text);
}
.sdr-color-btn:hover      { border-color: var(--sdr-yellow); }
.sdr-color-btn--active    { background: var(--sdr-navy); color: var(--sdr-white); border-color: var(--sdr-navy); }

.sdr-color-preview {
  width:         14px;
  height:        14px;
  border-radius: 50%;
  border:        1.5px solid rgba(0,0,0,.2);
}
.sdr-color-preview--white { background: #fff; }
.sdr-color-preview--black { background: #1a2340; }

/* ─── BUTONLAR ──────────────────────────── */

.sdr-btn-group {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-top:     16px;
}

.sdr-btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           6px;
  padding:       10px 18px;
  border-radius: 50px;
  border:        none;
  font-size:     13px;
  font-weight:   700;
  font-family:   inherit;
  cursor:        pointer;
  transition:    all var(--sdr-transition);
}
.sdr-btn:hover            { transform: translateY(-1px); }
.sdr-btn--primary         { background: linear-gradient(135deg,var(--sdr-yellow),var(--sdr-yellow-lt)); color: var(--sdr-navy); box-shadow: 0 4px 16px rgba(253,183,80,.3); }
.sdr-btn--primary:hover   { box-shadow: 0 8px 24px rgba(253,183,80,.5); }
.sdr-btn--dark            { background: var(--sdr-navy); color: var(--sdr-white); }
.sdr-btn--dark:hover      { background: var(--sdr-navy-mid); }
.sdr-btn--secondary       { background: var(--sdr-gray-mid); color: var(--sdr-navy); }
.sdr-btn--ghost           { background: transparent; color: var(--sdr-gray-text); border: 1.5px solid var(--sdr-gray-mid); }
.sdr-btn--ghost:hover     { border-color: var(--sdr-navy); color: var(--sdr-navy); }
.sdr-btn--sm              { padding: 6px 14px; font-size: 12px; }
.sdr-btn--full            { width: 100%; }

/* ─── SKOR KUTUSU ───────────────────────── */

.sdr-score-box {
  margin-top:    20px;
  padding:       14px;
  background:    var(--sdr-white);
  border-radius: var(--sdr-radius-sm);
  border:        1px solid var(--sdr-gray-mid);
}
.sdr-score-item {
  display:     flex;
  justify-content: space-between;
  align-items: center;
  padding:     5px 0;
  font-size:   13px;
  border-bottom: 1px solid var(--sdr-gray-mid);
}
.sdr-score-item:last-child { border-bottom: none; }
.sdr-score-val {
  font-size:   18px;
  font-weight: 700;
  color:       var(--sdr-navy);
}

/* ─── TAHTA ─────────────────────────────── */

.sdr-board-wrap {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  background:      var(--sdr-white);
}

.sdr-board {
  display:       grid;
  grid-template-columns: repeat(8, 1fr);
  width:         min(100%, 560px);
  aspect-ratio:  1;
  border-radius: 8px;
  overflow:      hidden;
  box-shadow:    var(--sdr-shadow-lg);
  user-select:   none;
}

/* ─── KARELER ───────────────────────────── */

.sdr-square {
  position:       relative;
  aspect-ratio:   1;
  cursor:         pointer;
  transition:     background var(--sdr-transition);
  display:        flex;
  align-items:    center;
  justify-content:center;
}
.sdr-square--light         { background: var(--sq-light); }
.sdr-square--dark          { background: var(--sq-dark); }
.sdr-square--selected      { background: var(--sq-sel) !important; }
.sdr-square--lastmove      { background: var(--sq-last) !important; }
.sdr-square--legal::after  {
  content:        '';
  position:       absolute;
  width:          30%;
  height:         30%;
  border-radius:  50%;
  background:     var(--sq-legal);
  pointer-events: none;
  z-index:        2;
}
.sdr-square--capture::after {
  content:        '';
  position:       absolute;
  inset:          0;
  border-radius:  50%;
  border:         4px solid var(--sq-cap);
  pointer-events: none;
  z-index:        2;
}
.sdr-square--check         { background: var(--sq-check) !important; }
.sdr-square--dragover      { background: var(--sq-hover) !important; }
.sdr-square:hover:not(.sdr-square--selected) { filter: brightness(1.08); }

/* ─── KOORDİNATLAR ──────────────────────── */

.sdr-coord {
  position:   absolute;
  font-size:  10px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  z-index:    1;
}
.sdr-coord--rank { top: 3px; left: 4px; }
.sdr-coord--file { bottom: 3px; right: 4px; }
.sdr-square--light .sdr-coord { color: var(--sq-dark); }
.sdr-square--dark  .sdr-coord { color: var(--sq-light); }

/* ─── TAŞLAR ────────────────────────────── */

.sdr-piece {
  width:         88%;
  height:        88%;
  position:      relative;
  z-index:       3;
  transition:    transform .15s ease;
  cursor:        grab;
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.sdr-piece:hover   { transform: scale(1.08); }
.sdr-piece:active  { cursor: grabbing; transform: scale(1.12); }
.sdr-piece svg     { width: 100%; height: 100%; }
.sdr-piece[draggable="false"] { cursor: default; }
.sdr-piece[draggable="false"]:hover { transform: none; }

/* ─── ELE GEÇİRİLEN TAŞLAR ─────────────── */

.sdr-captured {
  display:    flex;
  flex-wrap:  wrap;
  gap:        2px;
  padding:    6px 20px;
  min-height: 28px;
  background: var(--sdr-gray-light);
  border-top: 1px solid var(--sdr-gray-mid);
}
.sdr-captured--bottom { border-top: 1px solid var(--sdr-gray-mid); }
.sdr-cap-piece {
  width:  20px;
  height: 20px;
  display: inline-flex;
}
.sdr-cap-piece svg { width: 100%; height: 100%; }

/* ─── TERFİ DİYALOĞU ───────────────────── */

.sdr-promotion-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(26,35,64,.7);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         9999;
  backdrop-filter: blur(4px);
}
.sdr-promotion-box {
  background:    var(--sdr-white);
  border-radius: var(--sdr-radius);
  padding:       32px;
  box-shadow:    var(--sdr-shadow-lg);
  text-align:    center;
}
.sdr-promotion-title {
  font-size:     20px;
  font-weight:   700;
  color:         var(--sdr-navy);
  margin-bottom: 20px;
  font-family:   'Playfair Display', serif;
}
.sdr-promotion-pieces {
  display: flex;
  gap:     12px;
}
.sdr-promo-btn {
  width:         80px;
  height:        80px;
  border:        2px solid var(--sdr-gray-mid);
  border-radius: var(--sdr-radius-sm);
  background:    var(--sdr-white);
  cursor:        pointer;
  padding:       8px;
  transition:    all var(--sdr-transition);
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.sdr-promo-btn:hover {
  border-color: var(--sdr-yellow);
  background:   var(--sdr-yellow-pale);
  transform:    translateY(-3px);
  box-shadow:   var(--sdr-shadow);
}
.sdr-promo-btn svg { width: 100%; height: 100%; }

/* ─── OYUN SONU ─────────────────────────── */

.sdr-gameover-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(26,35,64,.75);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         9998;
  backdrop-filter: blur(6px);
}
.sdr-gameover-box {
  background:    var(--sdr-white);
  border-radius: var(--sdr-radius);
  padding:       40px 48px;
  box-shadow:    var(--sdr-shadow-lg);
  text-align:    center;
  max-width:     360px;
  width:         90%;
}
.sdr-gameover-icon  { font-size: 56px; margin-bottom: 12px; }
.sdr-gameover-title {
  font-family:   'Playfair Display', serif;
  font-size:     28px;
  font-weight:   700;
  color:         var(--sdr-navy);
  margin-bottom: 8px;
}
.sdr-gameover-sub {
  color:         var(--sdr-gray-text);
  margin-bottom: 24px;
  font-size:     15px;
}

/* ─── LOBI ──────────────────────────────── */

.sdr-lobby {
  background:    var(--sdr-white);
  border-radius: var(--sdr-radius);
  box-shadow:    var(--sdr-shadow);
  margin-bottom: 20px;
  overflow:      hidden;
}
.sdr-lobby-inner {
  padding: 32px;
  max-width: 480px;
  margin: 0 auto;
}
.sdr-lobby-title {
  font-family:   'Playfair Display', serif;
  font-size:     24px;
  color:         var(--sdr-navy);
  margin-bottom: 16px;
}
.sdr-lobby-status {
  font-size:     14px;
  color:         var(--sdr-gray-text);
  margin-bottom: 24px;
  padding:       12px 16px;
  background:    var(--sdr-gray-light);
  border-radius: var(--sdr-radius-sm);
}
.sdr-lobby-actions {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}
.sdr-lobby-divider {
  text-align:    center;
  color:         var(--sdr-gray-text);
  font-size:     13px;
  position:      relative;
}
.sdr-lobby-divider::before,
.sdr-lobby-divider::after {
  content:     '';
  position:    absolute;
  top:         50%;
  width:       40%;
  height:      1px;
  background:  var(--sdr-gray-mid);
}
.sdr-lobby-divider::before { left: 0; }
.sdr-lobby-divider::after  { right: 0; }

.sdr-join-form {
  display: flex;
  gap:     8px;
}
.sdr-room-input {
  flex:          1;
  padding:       11px 14px;
  border:        1.5px solid var(--sdr-gray-mid);
  border-radius: 50px;
  font-size:     14px;
  font-family:   inherit;
  outline:       none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight:   700;
  color:         var(--sdr-navy);
  transition:    border-color var(--sdr-transition);
}
.sdr-room-input:focus { border-color: var(--sdr-yellow); }

.sdr-room-code-box {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         12px 16px;
  background:      var(--sdr-yellow-pale);
  border:          1px solid rgba(253,183,80,.4);
  border-radius:   var(--sdr-radius-sm);
  font-size:       14px;
  margin-bottom:   12px;
}
.sdr-room-code-val {
  font-size:     20px;
  letter-spacing: 3px;
  font-weight:   700;
  color:         var(--sdr-navy);
  flex:          1;
}

/* ─── BAĞLANTI DURUMU ───────────────────── */

.sdr-connection-status {
  font-size:     12px;
  padding:       6px 12px;
  border-radius: 50px;
  display:       inline-block;
  margin-bottom: 8px;
}
.sdr-connection-status--connected    { background: rgba(46,204,113,.15); color: #27ae60; }
.sdr-connection-status--disconnected { background: rgba(231,76,60,.12);  color: var(--sdr-red); }

/* ─── BİLDİRİM ──────────────────────────── */

.sdr-notification {
  padding:       12px 16px;
  background:    var(--sdr-navy);
  color:         var(--sdr-white);
  border-radius: var(--sdr-radius-sm);
  font-size:     14px;
  margin-bottom: 12px;
  animation:     sdr-fadein .3s ease;
}
@keyframes sdr-fadein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ─── OYUNCU BİLGİSİ ────────────────────── */

.sdr-player-info {
  display:       flex;
  align-items:   center;
  gap:           16px;
  padding:       12px 16px;
  background:    var(--sdr-gray-light);
  border-radius: var(--sdr-radius-sm);
  margin-bottom: 12px;
}
.sdr-player-card     { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.sdr-player-color    { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); }
.sdr-player-color--w { background: #fff; }
.sdr-player-color--b { background: #1a2340; }
.sdr-vs              { color: var(--sdr-gray-text); font-size: 12px; font-weight: 700; }

/* ─── SOHBET ────────────────────────────── */

.sdr-chat {
  margin-top:    16px;
  border:        1px solid var(--sdr-gray-mid);
  border-radius: var(--sdr-radius-sm);
  overflow:      hidden;
}
.sdr-chat-messages {
  max-height:  200px;
  overflow-y:  auto;
  padding:     12px;
  font-size:   13px;
  background:  var(--sdr-gray-light);
}
.sdr-chat-msg        { padding: 4px 0; }
.sdr-chat-msg--own   { text-align: right; color: var(--sdr-navy); }
.sdr-chat-input-wrap { display: flex; gap: 8px; padding: 8px; background: var(--sdr-white); }
.sdr-chat-input {
  flex:        1;
  padding:     8px 12px;
  border:      1.5px solid var(--sdr-gray-mid);
  border-radius: 50px;
  font-size:   13px;
  font-family: inherit;
  outline:     none;
}
.sdr-chat-input:focus { border-color: var(--sdr-yellow); }

/* ─── GİRİŞ GEREKLİ ─────────────────────── */

.sdr-login-required {
  padding:       48px;
  text-align:    center;
  background:    var(--sdr-gray-light);
  border-radius: var(--sdr-radius);
}
.sdr-login-required a { color: var(--sdr-yellow); font-weight: 700; }

/* ─── LİDER TABLOSU ─────────────────────── */

.sdr-leaderboard-table {
  width:          100%;
  border-collapse: collapse;
  font-size:       14px;
}
.sdr-leaderboard-table th,
.sdr-leaderboard-table td {
  padding:       10px 16px;
  text-align:    left;
  border-bottom: 1px solid var(--sdr-gray-mid);
}
.sdr-leaderboard-table th {
  background:    var(--sdr-navy);
  color:         var(--sdr-white);
  font-weight:   700;
}
.sdr-leaderboard-table tr:nth-child(even) td { background: var(--sdr-gray-light); }
.sdr-leaderboard-table tr:first-child td     { color: var(--sdr-yellow); font-weight: 700; }

/* ─── RESPONSIVE ─────────────────────────── */

@media (max-width: 900px) {
  .sdr-game-area    { flex-direction: column; }
  .sdr-side-panel   { width: 100%; border-right: none; border-bottom: 1px solid var(--sdr-gray-mid); }
  .sdr-side-panel--right { border-left: none; border-top: 1px solid var(--sdr-gray-mid); }
  .sdr-board-wrap   { padding: 16px; }
  .sdr-board        { width: min(100%, 480px); }
  .sdr-difficulty-btns { flex-wrap: wrap; }
}

@media (max-width: 600px) {
  .sdr-board        { width: 100%; }
  .sdr-mode-tab     { padding: 10px 14px; font-size: 13px; }
  .sdr-gameover-box { padding: 28px 20px; }
  .sdr-lobby-inner  { padding: 20px; }
  .sdr-join-form    { flex-direction: column; }
}

/* ─── MOD BİLGİSİ ───────────────────────── */

.sdr-mode-info {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       6px 12px;
  background:    var(--sdr-yellow-pale);
  border:        1px solid rgba(253,183,80,.3);
  border-radius: 50px;
  font-size:     12px;
  font-weight:   600;
  color:         var(--sdr-navy);
  margin-bottom: 8px;
}