/* Tavla — oyun alanı stilleri */

.oyun-kolon {
  width: min(640px, 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-serit {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-orta);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cizgi-soluk);
  min-height: 48px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.oyuncu-serit.sirada {
  border-color: var(--altin-soft);
  box-shadow: 0 0 0 1px var(--altin-soft), 0 0 18px rgba(217, 176, 76, 0.15);
}
.oyuncu-serit .oyuncu-ad { font-weight: 800; font-size: 14px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oyuncu-serit .pip-rozet { font-size: 11px; color: var(--soluk); font-weight: 700; letter-spacing: 0.5px; }
.oyuncu-serit .top-rozet { font-size: 11px; color: var(--altin-1); font-weight: 800; }

/* ---------- tahta ---------- */
.tavla-kap {
  position: relative;
  border-radius: var(--r-buyuk);
  overflow: hidden;
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge-panel);
  background: linear-gradient(165deg, #1b2946, #101a2e);
  touch-action: manipulation;
}
#tahta-svg { display: block; width: 100%; height: auto; user-select: none; }

#tahta-svg .hane-hit { cursor: pointer; }
#tahta-svg .pul { transition: opacity 0.2s ease; }
#tahta-svg .pul.secilebilir { cursor: grab; }
#tahta-svg .hedef-halka {
  fill: rgba(232, 193, 90, 0.22);
  stroke: rgba(232, 193, 90, 0.85);
  stroke-width: 3;
  stroke-dasharray: 8 6;
  animation: hedefDon 2.4s linear infinite;
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes hedefDon { to { transform: rotate(360deg); } }
#tahta-svg .secili-halka {
  fill: none;
  stroke: rgba(90, 162, 232, 0.95);
  stroke-width: 4;
}

/* ---------- zarlar ---------- */
.zar-kutu {
  position: absolute;
  left: 26%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; gap: 10px;
  pointer-events: none;
}
.zar {
  width: clamp(34px, 7vw, 46px);
  aspect-ratio: 1;
  border-radius: 22%;
  background: linear-gradient(150deg, #fdf9ec, #e9dfc2);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.9);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 12%;
  gap: 4%;
}
.zar.kullanildi { opacity: 0.35; filter: saturate(0.4); }
.zar .nokta { border-radius: 50%; background: #21283a; align-self: center; justify-self: center; width: 80%; aspect-ratio: 1; }
.zar .bos { visibility: hidden; }
@keyframes zarSallan {
  0% { transform: translateY(-70px) rotate(-160deg) scale(0.7); opacity: 0; }
  60% { transform: translateY(6px) rotate(20deg) scale(1.06); opacity: 1; }
  100% { transform: none; }
}
.zar.sallan { animation: zarSallan 0.55s cubic-bezier(0.2, 0.8, 0.3, 1.1); }

/* ---------- sonuç tipi rozeti ---------- */
.sonuc-tip {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--altin-soft);
  background: rgba(217, 176, 76, 0.12);
  color: var(--altin-1);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
}