/* Batak — oyun alanı stilleri */

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

.durum-serit { padding: var(--s3) var(--s4); }

/* ---------- oyuncu mini kartları ---------- */
#oyuncu-kartlari {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s2);
}
.oyuncu-mini {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--s2) 4px;
  border-radius: var(--r-orta);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cizgi-soluk);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  min-width: 0;
}
.oyuncu-mini.sirada {
  border-color: var(--altin-soft);
  box-shadow: 0 0 0 1px var(--altin-soft), 0 0 16px rgba(217, 176, 76, 0.16);
}
.oyuncu-mini.ihale-sahibi { background: rgba(217, 176, 76, 0.07); }
.oyuncu-mini .mini-ad {
  font-size: 11px; font-weight: 800;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oyuncu-mini .mini-el {
  font-size: 12px; font-weight: 800; color: var(--altin-1);
  letter-spacing: 0.5px;
}
.oyuncu-mini .mini-skor { font-size: 10px; color: var(--soluk); font-weight: 700; }

/* ---------- masa ---------- */
.masa-kap {
  padding: var(--s3);
  border-radius: var(--r-buyuk);
  background:
    radial-gradient(ellipse at center, #17284a 0%, #101b33 70%, #0c1526 100%);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge-panel), inset 0 0 60px rgba(0, 0, 0, 0.4);
}
#masa {
  position: relative;
  height: clamp(160px, 38vw, 220px);
}
.masa-kart {
  position: absolute;
  left: 50%; top: 50%;
  --dx: 0px; --dy: 0px; --rot: 0deg;
  transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--rot));
}
.masa-kart.yon-0 { --dy: 34px; --rot: -2deg; }
.masa-kart.yon-1 { --dx: -64px; --rot: 5deg; }
.masa-kart.yon-2 { --dy: -34px; --rot: 2deg; }
.masa-kart.yon-3 { --dx: 64px; --rot: -5deg; }

@keyframes kartGel0 { from { transform: translate(-50%, -50%) translate(0, 190px) rotate(-14deg); opacity: 0; } }
@keyframes kartGel1 { from { transform: translate(-50%, -50%) translate(-230px, 0) rotate(16deg); opacity: 0; } }
@keyframes kartGel2 { from { transform: translate(-50%, -50%) translate(0, -190px) rotate(14deg); opacity: 0; } }
@keyframes kartGel3 { from { transform: translate(-50%, -50%) translate(230px, 0) rotate(-16deg); opacity: 0; } }
.masa-kart.yeni.yon-0 { animation: kartGel0 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
.masa-kart.yeni.yon-1 { animation: kartGel1 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
.masa-kart.yeni.yon-2 { animation: kartGel2 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
.masa-kart.yeni.yon-3 { animation: kartGel3 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1); }

@keyframes elSupur0 { to { transform: translate(-50%, -50%) translate(0, 220px) scale(0.6); opacity: 0; } }
@keyframes elSupur1 { to { transform: translate(-50%, -50%) translate(-260px, 0) scale(0.6); opacity: 0; } }
@keyframes elSupur2 { to { transform: translate(-50%, -50%) translate(0, -220px) scale(0.6); opacity: 0; } }
@keyframes elSupur3 { to { transform: translate(-50%, -50%) translate(260px, 0) scale(0.6); opacity: 0; } }
.masa-kart.supur-0 { animation: elSupur0 0.5s ease-in forwards; }
.masa-kart.supur-1 { animation: elSupur1 0.5s ease-in forwards; }
.masa-kart.supur-2 { animation: elSupur2 0.5s ease-in forwards; }
.masa-kart.supur-3 { animation: elSupur3 0.5s ease-in forwards; }

/* ---------- kart yüzü ---------- */
.kart-yuz {
  width: clamp(52px, 13vw, 68px);
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  background: linear-gradient(160deg, #fdf9ec 0%, #f2ead2 100%);
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}
.kart-yuz .kose {
  position: absolute;
  top: 3px; left: 5px;
  font-size: 13px; font-weight: 800; line-height: 1.02;
  text-align: center;
}
.kart-yuz .orta { font-size: 24px; opacity: 0.9; }
.kart-yuz.kirmizi { color: #c22b3d; }
.kart-yuz.siyah { color: #1d2430; }
.kart-yuz.koz-kart { box-shadow: 0 4px 10px rgba(0,0,0,0.45), 0 0 0 2px rgba(217,176,76,0.55); }

/* ---------- el (yelpaze) ---------- */
#el-kap {
  display: flex;
  justify-content: center;
  padding: var(--s2) 0 var(--s3);
  min-height: 96px;
}
.el-ic { display: flex; }
.el-kart {
  margin-left: clamp(-34px, -7vw, -20px);
  transition: box-shadow 0.16s ease, filter 0.16s ease;
  cursor: pointer;
  animation: elKartGir 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards;
  position: relative;
}
.el-kart:first-child { margin-left: 0; }
/* hover'da transform yasak (site kuralı) → altın halka + öne çıkarma */
.el-kart:hover, .el-kart:active {
  z-index: 5;
  filter: brightness(1.05);
  box-shadow: 0 0 0 3px rgba(217, 176, 76, 0.85), 0 6px 14px rgba(0, 0, 0, 0.5);
}
.el-kart.pasif {
  filter: brightness(0.55) saturate(0.5);
  cursor: not-allowed;
  pointer-events: none;
}
@keyframes elKartGir {
  from { transform: translateY(60px) rotate(8deg); opacity: 0; }
}

/* ---------- ihale / koz modal içerikleri ---------- */
.ihale-izgara {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s2);
}
.koz-secim { display: flex; gap: var(--s3); justify-content: center; }
.koz-secim button {
  width: 62px; height: 62px;
  border-radius: var(--r-orta);
  border: 1px solid var(--cizgi);
  background: #fdf9ec;
  font-size: 32px;
  cursor: pointer;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}
/* hover'da transform yasak (site kuralı) */
.koz-secim button:hover { border-color: var(--altin-2); box-shadow: 0 0 0 3px var(--altin-soft); }
.koz-secim .kirmizi { color: #c22b3d; }
.koz-secim .siyah { color: #1d2430; }

/* ---------- skor tablosu ---------- */
.skor-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.skor-tablo th, .skor-tablo td { padding: 6px 8px; text-align: center; }
.skor-tablo th {
  color: var(--soluk); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; border-bottom: 1px solid var(--cizgi-soluk);
}
.skor-tablo td { font-weight: 700; }
.skor-tablo .eksi { color: var(--kotu); }
.skor-tablo .arti { color: var(--iyi); }