/* ═══════════════════════════════════════════
   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;
}

/* ═══════════════════════════════════════════
   v2.0 — Çevrim içi oyun salonu, kabul ekranı, oyuncu çubukları, kendini silen sohbet
   ═══════════════════════════════════════════ */

.sdr-chess-app [hidden] { display: none !important; }
.sdr-chess-app *, .sdr-chess-app *::before, .sdr-chess-app *::after { box-sizing: border-box; }

.sdr-board-wrap { flex-direction: column; gap: 10px; }
.sdr-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.sdr-gameover-btns { display: flex; flex-direction: column; gap: 10px; }
.sdr-muted { color: var(--sdr-gray-text); font-size: 13px; }
.sdr-note  { color: var(--sdr-gray-text); font-style: italic; }

/* Bildirim türleri */
.sdr-notification--ok   { background: #1f7a4d; }
.sdr-notification--warn { background: #9a3b12; }

/* Kartlar, çipler, alanlar */
.sdr-card {
  background: var(--sdr-white);
  border: 1px solid var(--sdr-gray-mid);
  border-radius: var(--sdr-radius);
  padding: 18px;
  box-shadow: 0 2px 10px rgba(26,35,64,.05);
  min-width: 0;
}
.sdr-card-title {
  margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--sdr-navy);
  display: flex; align-items: center; gap: 8px;
}
.sdr-count {
  background: var(--sdr-navy); color: #fff; border-radius: 50px; font-size: 11px;
  padding: 2px 8px; font-weight: 700;
}
.sdr-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 50px;
  background: var(--sdr-gray-light); border: 1px solid var(--sdr-gray-mid); font-size: 12.5px; font-weight: 600; color: var(--sdr-navy);
  white-space: nowrap;
}
.sdr-chip--warn { background: #fdecea; border-color: #f5c2bd; color: #9a3b12; }
.sdr-chip--soft { background: var(--sdr-yellow-pale); border-color: rgba(253,183,80,.45); }
.sdr-field-label { font-size: 12px; font-weight: 700; color: var(--sdr-gray-text); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.sdr-input {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--sdr-gray-mid); border-radius: 10px;
  font: inherit; font-size: 14px; color: var(--sdr-navy); background: #fff; outline: none;
}
.sdr-input:focus { border-color: var(--sdr-yellow); }
.sdr-input--code { text-transform: uppercase; letter-spacing: 3px; font-weight: 700; }
.sdr-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--sdr-gray-text); margin: 12px 0 14px; cursor: pointer; }
.sdr-check input { margin-top: 2px; }

.sdr-segs { display: flex; gap: 6px; flex-wrap: wrap; }
.sdr-seg {
  flex: 1; min-width: 84px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--sdr-gray-mid);
  background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--sdr-gray-text); cursor: pointer;
}
.sdr-seg:hover { border-color: var(--sdr-yellow); }
.sdr-seg--active { background: var(--sdr-navy); border-color: var(--sdr-navy); color: #fff; }

/* Salon */
.sdr-salon { margin-bottom: 20px; }
.sdr-salon-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  background: var(--sdr-navy); color: #fff; border-radius: var(--sdr-radius); padding: 20px 22px; margin-bottom: 14px;
}
.sdr-salon-title { margin: 0 0 4px; font-family: 'Playfair Display', serif; font-size: 24px; color: #fff; }
.sdr-salon-sub   { margin: 0; font-size: 14px; color: rgba(255,255,255,.8); }
.sdr-salon-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.sdr-salon-head .sdr-chip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.sdr-salon-head .sdr-chip--warn { background: #fdecea; color: #9a3b12; }
.sdr-salon-me {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--sdr-navy);
  background: var(--sdr-yellow-pale); border: 1px solid rgba(253,183,80,.4); border-radius: var(--sdr-radius-sm);
  padding: 10px 14px; margin-bottom: 14px;
}
.sdr-salon-me .sdr-input { width: auto; flex: 1; min-width: 140px; max-width: 240px; padding: 7px 10px; }
.sdr-salon-grid { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 14px; align-items: start; }
.sdr-salon-empty { text-align: center; padding: 40px 20px; font-size: 15px; }
.sdr-salon-empty a { color: var(--sdr-navy); font-weight: 700; text-decoration: underline; }

.sdr-join-code { border-top: 1px dashed var(--sdr-gray-mid); margin-top: 16px; padding-top: 4px; }
.sdr-join-row { display: flex; gap: 8px; }
.sdr-my-code { display: flex; align-items: center; gap: 10px; font-size: 15px; flex-wrap: wrap; }
.sdr-my-code strong { font-size: 22px; letter-spacing: 3px; color: var(--sdr-navy); }

.sdr-table-list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.sdr-trow {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--sdr-gray-light); border: 1px solid transparent; transition: border-color var(--sdr-transition);
}
.sdr-trow:hover { border-color: rgba(253,183,80,.6); }
.sdr-trow-main { flex: 1; min-width: 0; }
.sdr-trow-name { font-weight: 700; font-size: 14px; color: var(--sdr-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdr-trow-meta { font-size: 12px; color: var(--sdr-gray-text); margin-top: 2px; }
.sdr-vs-sm { font-size: 11px; color: var(--sdr-gray-text); font-weight: 600; margin: 0 2px; }
.sdr-empty { font-size: 13.5px; color: var(--sdr-gray-text); padding: 18px 8px; text-align: center; }

.sdr-wait-anim { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sdr-navy); font-weight: 600; margin: 10px 0; }
.sdr-dots { display: inline-flex; gap: 4px; }
.sdr-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--sdr-yellow); animation: sdr-bounce 1s infinite ease-in-out; }
.sdr-dots i:nth-child(2) { animation-delay: .15s; }
.sdr-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sdr-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }

/* Kabul ekranı / onay pencereleri */
.sdr-modal {
  position: fixed; inset: 0; z-index: 9999; background: rgba(26,35,64,.72); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.sdr-modal-box {
  background: #fff; border-radius: 20px; box-shadow: var(--sdr-shadow-lg); padding: 28px 26px 22px;
  width: 100%; max-width: 400px; text-align: center; animation: sdr-pop .25s ease;
}
.sdr-modal-box--gelen { border-top: 6px solid var(--sdr-yellow); }
@keyframes sdr-pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.sdr-modal-title { font-family: 'Playfair Display', serif; font-size: 24px; color: var(--sdr-navy); margin: 8px 0 6px; }
.sdr-modal-text  { font-size: 15px; color: var(--sdr-gray-text); margin: 0 0 12px; }
.sdr-modal-text strong { color: var(--sdr-navy); }
.sdr-modal-meta { list-style: none; padding: 10px 14px; margin: 0 0 16px; background: var(--sdr-gray-light); border-radius: 12px; font-size: 14px; text-align: left; }
.sdr-modal-meta li { padding: 3px 0; }
.sdr-modal-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.sdr-modal-btns .sdr-btn { flex: 1; min-width: 130px; }
.sdr-modal-box .sdr-wait-anim { justify-content: center; }

.sdr-ring { position: relative; width: 64px; height: 64px; margin: 0 auto; }
.sdr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sdr-ring-bg { fill: none; stroke: var(--sdr-gray-mid); stroke-width: 4; }
.sdr-ring-fg { fill: none; stroke: var(--sdr-yellow); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 0; transition: stroke-dashoffset .25s linear; }
.sdr-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; color: var(--sdr-navy); }

/* Oyuncu çubukları ve saat */
.sdr-player-bar { width: min(100%, 560px); }
.sdr-pbar {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px;
  background: var(--sdr-gray-light); border: 1.5px solid var(--sdr-gray-mid); transition: border-color var(--sdr-transition), background var(--sdr-transition);
}
.sdr-pbar--active { border-color: var(--sdr-yellow); background: var(--sdr-yellow-pale); }
.sdr-pbar-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(0,0,0,.2); flex-shrink: 0; }
.sdr-pbar-dot--w { background: #fff; }
.sdr-pbar-dot--b { background: var(--sdr-navy); }
.sdr-pbar-name { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; color: var(--sdr-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdr-you { font-weight: 500; color: var(--sdr-gray-text); font-size: 12px; }
.sdr-pbar-conn { width: 8px; height: 8px; border-radius: 50%; background: var(--sdr-green); flex-shrink: 0; }
.sdr-pbar-conn--off { background: var(--sdr-red); animation: sdr-pulse 1s infinite; }
.sdr-pbar-clock {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 18px; padding: 3px 10px; border-radius: 8px;
  background: var(--sdr-navy); color: #fff; min-width: 74px; text-align: center;
}
.sdr-pbar--active .sdr-pbar-clock { background: var(--sdr-yellow); color: var(--sdr-navy); }
.sdr-pbar-clock--low { background: var(--sdr-red) !important; color: #fff !important; animation: sdr-pulse 1s infinite; }

/* Sağ panel: çevrim içi kontroller */
.sdr-live-info { font-size: 13px; color: var(--sdr-gray-text); margin: 8px 0 4px; line-height: 1.5; }
.sdr-live-info strong { color: var(--sdr-navy); letter-spacing: 1px; }
.sdr-draw-offer {
  background: var(--sdr-yellow-pale); border: 1px solid rgba(253,183,80,.5); border-radius: 12px;
  padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--sdr-navy); margin: 10px 0;
}
.sdr-btn-row { display: flex; gap: 6px; margin-top: 8px; }
.sdr-btn-row .sdr-btn { flex: 1; }

/* Sohbet */
.sdr-chat { background: var(--sdr-white); box-shadow: var(--sdr-shadow); }
.sdr-chat-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--sdr-navy);
}
.sdr-chat-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.sdr-chat-tab {
  position: relative; border: 0; background: transparent; color: rgba(255,255,255,.7); font: inherit; font-size: 13px; font-weight: 700;
  padding: 6px 12px; border-radius: 50px; cursor: pointer;
}
.sdr-chat-tab--active { background: var(--sdr-yellow); color: var(--sdr-navy); }
.sdr-chat-badge { display: inline-block; margin-left: 4px; color: var(--sdr-yellow); font-weight: 900; }
.sdr-chat-tab--active .sdr-chat-badge { color: var(--sdr-navy); }
.sdr-chat-ttl { font-size: 11.5px; color: rgba(255,255,255,.75); }
.sdr-chat-messages { min-height: 120px; max-height: 240px; }
.sdr-chat-msg {
  position: relative; padding: 6px 10px 8px; margin: 0 0 6px; background: #fff; border-radius: 10px;
  overflow: hidden; word-wrap: break-word; max-width: 85%;
}
.sdr-chat-msg--own { margin-left: auto; background: var(--sdr-yellow-pale); text-align: left; }
.sdr-chat-msg--sys { max-width: 100%; background: transparent; color: var(--sdr-gray-text); font-size: 12.5px; text-align: center; font-weight: 600; }
.sdr-life {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--sdr-yellow);
  transform-origin: left center; transition: transform .25s linear; opacity: .8;
}
.sdr-chat-empty { color: var(--sdr-gray-text); text-align: center; padding: 26px 0; font-size: 13px; }
.sdr-chat-quick { display: flex; gap: 6px; padding: 8px 8px 0; overflow-x: auto; background: #fff; scrollbar-width: thin; }
.sdr-quick {
  flex-shrink: 0; border: 1px solid var(--sdr-gray-mid); background: var(--sdr-gray-light); border-radius: 50px;
  padding: 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--sdr-navy);
}
.sdr-quick:hover { border-color: var(--sdr-yellow); background: var(--sdr-yellow-pale); }
.sdr-chat-readonly { padding: 10px 12px; font-size: 12.5px; color: var(--sdr-gray-text); background: #fff; border-top: 1px solid var(--sdr-gray-mid); }

@media (max-width: 1000px) {
  .sdr-salon-grid { grid-template-columns: 1fr 1fr; }
  .sdr-card--create { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sdr-salon-grid { grid-template-columns: 1fr; }
  .sdr-salon-head { padding: 16px; }
  .sdr-salon-title { font-size: 20px; }
  .sdr-pbar-clock { font-size: 16px; min-width: 64px; }
  .sdr-chat-ttl { width: 100%; }
  .sdr-modal-box { padding: 22px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sdr-dots i, .sdr-pbar-conn--off, .sdr-pbar-clock--low, .sdr-modal-box { animation: none; }
}
.sdr-status-bar .sdr-captured:empty, .sdr-captured--bottom:empty { display: none; }
@media (max-width: 900px) {
  .sdr-board-wrap { order: -1; }
  .sdr-move-list  { max-height: 120px; overflow-y: auto; }
}