/* =========================================================
   OKEY 101 - Oyun Masası / Istaka Stilleri
   ========================================================= */

/* Kullanıcının verdiği referans görsele ("101 Okey Plus") göre masa renk paleti — koyu
   yeşil yerine lacivert/turkuaz masa, altın vurgu yerine lacivert/beyaz vurgu, ıstaka koyu
   kahve yerine canlı turuncu-ahşap. Aşağıdaki tüm kurallar bu tokenlara referans verir. */
:root {
  --table-bg-1: #1c6a84;
  --table-bg-2: #114a5e;
  --table-bg-3: #062430;
  --panel-bg-1: rgba(10, 45, 60, 0.55);
  --panel-bg-2: rgba(6, 30, 42, 0.4);
  --panel-border: rgba(255,255,255,0.16);
  --accent-navy-1: #1c4f6b;
  --accent-navy-2: #0d2c40;
  --title-ink: #d7ecf3;
  --wood-1: #e8973a;
  --wood-2: #b06a1c;
  --wood-3: #7a4712;
}

html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* =========================================================
   AŞAMA-KİLİTLİ (transform:scale) DÜZEN — "Dinamik Fluid" mimarisinden GERİ DÖNÜLDÜ.
   TÜM oyun alanı SABİT bir tasarım çözünürlüğünde (1488x660) çizilir ve bu TEK kapsayıcı
   (#gameCanvas) JS tarafından hesaplanan TEK bir ölçek faktörüyle (--game-canvas-scale)
   büyütülüp küçültülür — böylece her alan birbirine göre TAM OLARAK aynı oranda kalır.
   .game-canvas-inner ayrı bir transform UYGULAMAZ (çifte iç içe transform bulanıklığını
   önlemek için) — sadece #gameCanvas'ın %100'ünü kaplayan düz bir yerleşim katmanıdır.
   .game-table sadece bu kanvası ortalayan, taşan kısmı gizleyen bir "vitrin" görevi görür.

   Kapsayıcı zinciri: .game-body (100vw/100dvh, TEK arka plan kaynağı — letterbox/pillarbox
   alanlarında ekran rengi değil masa rengi görünsün diye altındaki tüm katmanlar transparent)
   → .game-table (flex ile ortalar, yan döndürme burada transform:rotate() uygular) →
   .game-canvas (1488x660 sabit tasarım kanvası, transform:scale(var(--game-canvas-scale))) →
   .game-canvas-inner (üstte rakip / ortada masa / altta ıstaka — absolute konumlandırma).

   NOT (kısıtlama ekranı genişletme): Kullanıcı isteğiyle kanvas genişliği 1080'den 1360'a
   çıkarıldı — kısıtlama/ölçekleme MANTIĞI aynen korunuyor (tek scale faktörü, aynı yükseklik
   660), sadece daha geniş bir tasarım alanı kullanılıyor. Masa merkezi (.table-center, sabit
   820px + margin:auto) BİLİNÇLİ OLARAK değiştirilmedi — aynı boyutta kalıp yeni kanvasta yine
   ortalanıyor. Genişleyen SADECE oyuncu alanları: .opp-left/.opp-right kenara sabit px ile
   konumlandığı için kanvas genişleyince otomatik olarak yeni (daha uzak) kenarlara yayılıyor;
   .opp-top-row zaten %50 ile ortalı kaldığı için konumu değişmiyor. */
.game-body {
  margin: 0;
  height: 100vh; /* eski tarayıcılar için yedek */
  height: 100dvh; /* modern mobil tarayıcılarda GERÇEK görünür yükseklik (adres çubuğu dahil değil) */
  width: 100vw;
  max-width: 100vw;
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: radial-gradient(circle at 50% 30%, var(--table-bg-1) 0%, var(--table-bg-2) 55%, var(--table-bg-3) 100%);
  overflow: hidden;
  overflow-x: hidden;
  overscroll-behavior: contain; /* mobilde taş sürüklerken kazara pull-to-refresh tetiklenmesin */
  user-select: none;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  /* Mobil tarayıcıların varsayılan gri "dokunma flaşını" kaldırıyoruz — kendi özel dokunma geri
     bildirimimiz (aşağıdaki .tile:active, .btn:active vb.) çok daha temiz ve markaya uygun. */
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-table {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Bilinçli olarak TRANSPARENT — kendi arka planı YOK, tek arka plan kaynağı .game-body'dir. */
  background: transparent;
}

.game-canvas {
  position: relative;
  flex-shrink: 0;
  width: 1488px;
  height: 660px;
  transform: scale(var(--game-canvas-scale, 1));
  transform-origin: center center;
  background: transparent;
}
.game-canvas-inner {
  /* Sabit 1488x660 tasarım uzayı — #gameCanvas zaten tek başına ölçekleniyor, burada AYRICA bir
     transform YOK (çifte iç içe transform bulanıklığını önlemek için). Rakip alanları absolute
     konumlandırılır (aşağıya bakınız); .table-center ve .my-zone ise DİKEY FLEX akışında —
     .table-center kalan TÜM alanı (flex:1) doldurur, .my-zone (ıstaka/butonlar) altta sabit
     yüksekliğinde kalır (bkz. .my-zone { flex-shrink:0 }). */
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
}

/* ---------------- Rakip alanları ---------------- */
.opp-slot {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #eaf4ec;
}
.opp-top-row {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 10;
}
.opp-top { position: static; }
.opp-left { left: 6px; top: 50%; transform: translateY(-50%); }
.opp-right { right: 6px; top: 50%; transform: translateY(-50%); }

.opp-name-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

.opp-name {
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
}
.opp-name.active-turn { background: #d4a537; color: #3a2a05; }

.opp-status {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #dfece1;
  background: rgba(255,255,255,0.08);
  padding: 4px 9px;
  border-left: 1px solid rgba(255,255,255,0.15);
  white-space: nowrap;
}
.opp-status.opened { color: #12331f; background: #6fe08c; }

.opp-turn-status {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #3a2a05;
  background: #d4a537;
  padding: 4px 9px;
  border-left: 1px solid rgba(255,255,255,0.25);
  white-space: nowrap;
  animation: pulse-turn 1.3s ease-in-out infinite;
}
@keyframes pulse-turn {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.opp-left .opp-name-row, .opp-right .opp-name-row {
  flex-direction: column;
  border-radius: 10px;
}
.opp-left .opp-status, .opp-right .opp-status {
  border-right: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 6px 4px;
}
.opp-left .opp-name, .opp-right .opp-name {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 8px 4px;
}
.opp-left .opp-turn-status, .opp-right .opp-turn-status {
  border-left: none;
  border-top: 1px solid rgba(255,255,255,0.25);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 6px 4px;
}

.opp-tiles {
  display: flex;
  gap: 2px;
}
.opp-tile-back {
  width: 12px; height: 17px;
  background: linear-gradient(160deg, #8b1a1a, #5c0f0f);
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.25);
}

.opp-discard {
  width: 42px; height: 58px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}

/* ---------------- Masa merkezi ---------------- */
.table-center {
  /* Sabit tasarım kanvası (1488x660) içinde ortalanmış masa alanı; üst rakip badge/kutusu
     absolute konumlandığı için burada üstten sabit bir boşluk (padding-top) bırakılır ki
     üst üste binmesin. flex:1 ile .game-canvas-inner'daki (dikey flex) kalan TÜM alanı doldurur,
     min-height:0 taşan iç içerik için scroll (.meld-zone{overflow-y:auto}) devreye girsin diye
     gerekli. */
  flex: 1;
  min-height: 0;
  /* ÖNEMLİ (yan-yatay/rotate düzeltmesi): burada GERÇEK viewport birimi (vw/vh) KULLANILMAZ.
     Bu alan zaten sabit 1488x660 tasarım kanvası içinde ve kanvasın TAMAMI JS tarafından TEK
     bir ölçek faktörüyle küçültülüp büyütülüyor (bkz. applyGameCanvasScale). İçeride ayrıca
     vw/vh kullanmak, kanvasın kendi ölçeğini YOK SAYAR ve özellikle "sahte 90° döndürme"
     modunda (bkz. aşağıdaki portrait medya sorgusu) eksenler karışıp taşların/kutuların iç içe
     binmesine yol açıyordu — bu yüzden sabit piksel (tasarım-uzayı) değerine çevrildi. */
  width: 820px;
  margin: 0 auto;
  padding-top: 78px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

/* KULLANICI İSTEĞİ: "el sayısı" rozeti VE masaya konulan BAHİS TUTARI rozeti (masa ücreti
   -%10 kesinti- DEĞİL, doğrudan stake/bahis tutarı), Seri Açma Alanı ile Çift Açma Alanı'nın
   TAM ORTASINDAKİ boşlukta (.center-info), ÜST ÜSTE (dikey) duruyor — göstergenin hemen
   üzerinde. (Önceki denemede masanın en üstüne, Sıra kutusunun üzerine konmuştu; kullanıcı
   isteğiyle buradan kaldırılıp bu boşluğa taşındı.) */
.hand-fee-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.turn-box-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  /* GÜVENLİK BOŞLUĞU: hangi medya sorgusu (ekran boyutu) devrede olursa olsun, üstteki rakip
     (opp-top) kutusuyla ASLA çakışmaması için ek bir minimum boşluk. table-center'ın padding-top
     değeri farklı ekran boyutlarında değişse de, bu ek boşluk her zaman devrededir. */
  margin-top: 6px;
}
/* KULLANICI İSTEĞİ ("el sayısını biraz genişliğini kısalt"): yatay padding biraz azaltıldı —
   rozet aynı yükseklikte kalıyor, sadece SAĞ/SOL taraftan biraz daha dar görünüyor. */
.hand-badge {
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(212,165,55,0.22), rgba(212,165,55,0.08));
  border: 1px solid rgba(212,165,55,0.5);
  color: #eecf7e;
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}
/* KULLANICI İSTEĞİ: masaya konulan BAHİS TUTARINI (table_stake — masa ücreti/%10 kesinti
   DEĞİL) gösteren rozet artık masanın SOL ÜST köşesinde (önce sağ üst denenmişti, kullanıcı
   isteğiyle sol üste taşındı), SABİT (absolute) ve ÖNCEKİNDEN DAHA BÜYÜK. #gameCanvasInner
   zaten position:relative olduğu için burada da btn-forfeit ile aynı teknikle absolute
   konumlanır ve kanvasın geri kalanıyla AYNI tek ölçek faktörüyle küçülüp büyür.
   KULLANICI İSTEĞİ (renk): yeşilimsi ton yerine masadaki diğer rozetlerle (hand-badge,
   indicator-box vb.) AYNI ALTIN/AÇIK SARI temaya çevrildi — sitenin genel rengiyle uyumlu
   olsun diye. Görünürlüğü artık SADECE JS'te (game.js, state.is_my_turn) yönetiliyor — bkz.
   aşağıdaki .game-table.my-turn kuralı yalnızca EK GÜVENCE (defense-in-depth) olarak duruyor. */
.table-fee-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 15;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(212,165,55,0.28), rgba(212,165,55,0.12));
  border: 2px solid rgba(238,207,126,0.65);
  color: #ffe9a8;
  font-weight: 900;
  font-size: 19px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.btn-leave-table {
  background: linear-gradient(160deg, #8c2a20, #5c1a12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 9px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}
.btn-leave-table:hover { transform: translateY(-1px); }
.btn-leave-table.btn-return-table { background: linear-gradient(160deg, #1a7a52, #0d4a30); }

/* "Masadan Çık" artık ıstaka satırında değil — kullanıcı isteğiyle SOL ÜST köşeden SAĞ ALT
   köşeye taşındı; masanın (1488x660 tasarım kanvasının) sağ-alt köşesine sabit. #gameCanvas
   zaten position:relative olduğu için burada absolute konumlanır ve kanvasın geri kalanıyla AYNI
   tek ölçek faktörüyle küçülüp büyür. Görünürlüğü (sıra bizdeyken gizlenmesi dahil) artık
   game.js'de state.is_my_turn'e göre yönetiliyor (bkz. updateGameState).
   KULLANICI İSTEĞİ ("çok köşede, biraz iç tarafa çek ve masa ile dekorasyona uyumlu olsun"):
   1) tam köşeye yapışık durmasın diye bottom/right değerleri artırılarak masanın kenar
      çizgisinden (border) içeri çekildi; 2) düz/parlak kırmızı gradyan yerine, sitenin geri
      kalanında kullanılan koyu petrol-yeşili + altın (#d4a537) çerçeve teması uygulandı (bkz.
      .center-info-badge, .signature-preview vb. ile AYNI renk paleti) — böylece buton artık
      masanın/dekorun geri kalanıyla uyumlu, ama yine de altın çerçeve + kırmızımsı iç tonuyla
      "dikkatli kullanın" hissini koruyor. */
.btn-forfeit {
  position: absolute;
  bottom: 22px;
  right: 22px;
  z-index: 15;
  font-size: 11px;
  padding: 6px 14px;
  background: linear-gradient(160deg, rgba(140,42,32,0.85), rgba(11,42,30,0.92));
  border: 1px solid rgba(212,165,55,0.55);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-forfeit:hover { border-color: rgba(212,165,55,0.85); }

/* El sayısı/Masa Ücreti rozetleri + Gösterge + Havuz: Seri Açma Alanı ile Çift Açma Alanı'nın
   TAM ORTASINDA dikey bir sütun — en üstte el sayısı/bahis tutarı rozetleri (üst üste), hemen
   altında gösterge, en altta taş çekme havuzu, ARKASINDA panel/pencere YOK (şeffaf). */
.center-info {
  display: flex;
  flex-direction: column;
  /* KULLANICI İSTEĞİ ("el sayısı, gösterge, taş çek üst üste binmiş, aralarına boşluk bırak"):
     KÖK SEBEP — .hand-fee-stack/.indicator-box/.pool-box üzerindeki transform:scale(1.22) SADECE
     boyama (paint) aşamasında büyütüyor, LAYOUT'ta (flex akışında) hiç yer kaplamıyor; bu yüzden
     aralarındaki 16px'lik gerçek boşluk, %22 büyümüş kutuların görsel taşmasını (özellikle üstten/
     alttan) YUTMAYA yetmiyordu ve kutular birbirinin üzerine biniyordu. Çözüm: gerçek (layout)
     boşluk artırıldı (16px → 26px) — .series-zone/.pair-zone'un GENİŞLİĞİNİ etkilemez, çünkü bu
     gap sadece .center-info'nun KENDİ dikey sütunu içinde, .center-info'nun İÇİNDEKİ elemanlar
     arasında uygulanır (yatay genişliğini/kardeşlerinin flex hesabını hiç değiştirmez). */
  gap: 26px;
  align-items: center;
  /* Gösterge zone-title'larla aynı hizaya yakın dursun diye dikeyde ORTALAMAK yerine ÜSTTEN
     hizalanır (flex-start); küçük bir üst boşluk eklendi. */
  justify-content: flex-start;
  padding-top: 4px;
  align-self: center;
  flex: 0 0 auto;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}

.indicator-box, .pool-box, .turn-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #e6f0e8;
}
/* KULLANICI İSTEĞİ: "el sayısı, taş çek, göstergeyi biraz daha büyüt, seri diz veya çift diz
   alanını hiç daraltmadan yap" — bu üçü .center-info içinde, .series-zone (flex:1) ile
   .pair-zone (sabit 162px) ARASINDA duruyor; PADDING/FONT-SIZE ile büyütmek .center-info'nun
   gerçek genişliğini artırır, bu da flex:1 olan .series-zone'u KAÇINILMAZ OLARAK daraltırdı.
   Kök çözüm: transform:scale() kullanılır — bu, elemanın GÖRSEL boyutunu büyütür ama LAYOUT
   (flex hesaplaması, kardeş elemanların genişliği) üzerinde SIFIR etkisi vardır, çünkü
   transform tamamen "boyama" (paint) aşamasında uygulanır, kutu modelini/flex akışını
   ETKİLEMEZ. Böylece komşu Seri/Çift Diz alanları TEK PİKSEL bile daralmadan bu üç öğe
   gözle görülür şekilde büyümüş olur. */
.hand-fee-stack, .indicator-box, .pool-box {
  transform: scale(1.22);
  transform-origin: center;
  /* EK GÜVENCE: %22 büyümenin üst/alt taşmasını (yukarıdaki .center-info gap artışına EK olarak)
     karşılamak için küçük bir dikey margin — bu da yalnızca .center-info'nun DİKEY iç boşluğunu
     etkiler, ASLA .series-zone (flex:1) veya .pair-zone (162px sabit) genişliğini değiştirmez;
     onlar bu sütunun KARDEŞİ, .center-info'nun kendi çocukları değil. */
  margin-top: 6px;
  margin-bottom: 6px;
}
.pool-box.clickable { cursor: pointer; }
.pool-box.clickable .pb-count {
  animation: pulse-pool 1.4s ease-in-out infinite;
}
@keyframes pulse-pool {
  0%, 100% { text-shadow: 0 0 3px rgba(224,54,54,0.35); }
  50% { text-shadow: 0 0 16px rgba(224,54,54,1), 0 0 4px rgba(255,255,255,0.5); }
}
.ib-label, .pb-label { font-size: 10px; color: var(--title-ink); opacity: 0.7; text-transform: uppercase; letter-spacing: 0.5px; }
.ib-tile { width: 32px; height: 46px; }

/* "Taş Çek" (havuz) görseli — Gösterge kutusundaki gibi, gerçek bir okey taşı yığını görünümü.
   Üç taş üst üste hafif kaydırılarak yığın efekti verir; sayı en üstteki taşın üzerinde durur. */
.pb-stack {
  position: relative;
  width: 40px;
  height: 46px;
}
.pb-stack-tile {
  position: absolute;
  width: 32px;
  height: 46px;
  border-radius: 6px;
  /* KULLANICI İSTEĞİ "taşları tam gerçekçi yap" — .tile ile AYNI sıcak fildişi/krem yüzey ve
     3D kalınlık hissi (bkz. .tile) buradaki yığın görseline de uygulandı, tutarlılık için. */
  background:
    radial-gradient(140% 90% at 28% 6%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(165deg, #fffdf7 0%, #f8f3e6 42%, #ece3cd 76%, #ddd2b4 100%);
  border: 1px solid #c3b795;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -4px 5px rgba(120,95,40,0.14),
    0 1px 0 rgba(191,176,138,0.85),
    0 2px 4px rgba(0,0,0,0.35);
}
.pb-tile-3 { top: 4px; left: 8px; transform: rotate(6deg); opacity: 0.75; }
.pb-tile-2 { top: 2px; left: 4px; transform: rotate(-4deg); opacity: 0.88; }
.pb-tile-1 { top: 0; left: 0; transform: rotate(1deg); }
.pool-box.clickable .pb-stack-tile { animation: pool-glow 1.4s ease-in-out infinite; }
/* KULLANICI İSTEĞİ: havuzdan taş çekerken güzel bir efekt — tıklanınca yığının en üstteki taşı
   kısa bir "çekiliyor" hareketiyle yukarı kalkıp geri düşüyor (JS bu class'ı ~0.4sn için ekliyor,
   bkz. #poolBox click dinleyicisi). */
.pool-box.drawing .pb-tile-1 {
  animation: poolDrawPulse 0.4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes poolDrawPulse {
  0%   { transform: rotate(1deg) translateY(0) scale(1); }
  35%  { transform: rotate(-6deg) translateY(-16px) scale(1.08); box-shadow: 0 14px 18px rgba(0,0,0,0.4); }
  100% { transform: rotate(1deg) translateY(0) scale(1); }
}
/* KULLANICI İSTEĞİ: "Taş Çek" yığınının sönüp-yanma parıltısı SARI(altın) yerine KIRMIZI olsun,
   ve "biraz daha belirgin olsun" — parıltı yarıçapı/yayılımı ve opaklığı belirgin şekilde
   artırıldı, sönük anda bile hafif kırmızı bir taban parıltısı bırakılarak nabız daha net hissettirildi. */
@keyframes pool-glow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -5px 6px rgba(120,40,40,0.2), 0 0 6px 1px rgba(224,54,54,0.35); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -5px 6px rgba(120,40,40,0.2), 0 0 20px 6px rgba(224,54,54,0.95); }
}
.pb-count {
  position: absolute;
  top: 50%;
  left: 0;
  width: 32px;
  transform: translateY(-50%);
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: #1c1c1c;
  z-index: 5;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.turn-box { font-size: 12.5px; font-weight: 700; padding: 0 6px; }
.turn-box.my-turn #turnLabel { color: #6fe08c; }
/* ÖNEMLİ: rutin sıra metni artık boş bırakılıyor (bkz. game.js) — boşken bu kutu hiç yer
   kaplamasın diye kendisi de gizlenir; sadece önemli bir mesaj (el bitti, kazandınız vb.)
   yazıldığında tekrar görünür olur. */
#turnLabel:empty { display: none; }
.turn-countdown {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 11.5px;
  font-weight: 800;
  color: #d4e6d7;
}
.turn-countdown.urgent {
  background: #c0392b;
  color: #fff;
  animation: pulse-turn 0.8s ease-in-out infinite;
}

/* ÖNEMLİ: KULLANICI İSTEĞİ "skor tablosu profesyonelleşsin, yazılar daha görünür olsun, masayla
   uyumlu olsun" — panel artık masanın kendi paletiyle (teal/lacivert radial + altın çerçeve +
   ahşap tonlu ayraç çizgisi) inşa edilmiş, koyu yeşilimsi eski zemin tamamen kaldırıldı. Metinler
   daha yüksek kontrastlı/okunaklı bir beyaza, kazanan/kaybeden vurguları daha net renklere çekildi.
   SONRAKİ KULLANICI İSTEĞİ: "masadan çık, biraz daha yukarı taşı ve daha büyük olsun" — kutu artık
   (game.js tarafında) Seri Açma panelinin İÇİNE değil, TÜM 1488x660 kanvasın (#gameCanvasInner)
   üstüne ekleniyor; burada da tam ortadan biraz YUKARI kaydırıldı (top:44%), boyutu büyütüldü ve
   "masadan kabarık şekilde yükselen" bir görünüm için gölge/çerçeve belirgin şekilde güçlendirildi. */
.final-scores-box {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200; /* masadaki HER ŞEYİN (rakip kutuları, my-turn panel büyümesi vb.) üstünde kalsın */
  background: radial-gradient(circle at 50% 12%, var(--table-bg-1) 0%, var(--table-bg-2) 55%, var(--table-bg-3) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(212,165,55,0.75);
  border-radius: 20px;
  padding: 20px 30px;
  min-width: 320px;
  max-width: 92%;
  /* Çift katmanlı, geniş yayılımlı gölge + altın parıltı halkası — panel masadan "kabarık"
     şekilde yükseliyormuş, sanki üstüne konmuş ayrı bir obje gibi görünsün. */
  box-shadow:
    0 26px 60px rgba(0,0,0,0.65),
    0 8px 20px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,0,0,0.3),
    0 0 34px 2px rgba(212,165,55,0.28),
    inset 0 1px 0 rgba(255,255,255,0.14);
  color: #f2f8f4;
}
.final-scores-title {
  font-size: 15.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #f3cf6a;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  margin-bottom: 10px;
  padding-bottom: 9px;
  /* Masadaki ahşap kenarlığı çağrıştıran ince altın-kahve degrade ayraç çizgisi. */
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--wood-1), transparent) 1;
}

.final-scores-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(212,165,55,0.3);
}
.table-close-countdown {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.15);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #ffb066;
}

/* ÖNEMLİ: KULLANICI İSTEĞİ "skor tablosu alt alta diziliyor, sayfa yetmiyor, aşağı taşıyor" — her
   oyuncu artık 3 AYRI SATIR (ana skor + el dökümü + para hareketi) yerine TEK SATIRLIK bir grid
   satırına sığdırılıyor (Sıra | Oyuncu | Puan | Para), bu da dikey yüksekliği ~3 kat azaltıyor.
   Ayrıca .final-scores-list bir GÜVENCE olarak max-height+scroll taşıyor (bkz. aşağı). */
.final-scores-list {
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
  /* İnce, masa paletine uygun kaydırma çubuğu (Firefox + WebKit). */
  scrollbar-width: thin;
  scrollbar-color: rgba(212,165,55,0.55) rgba(255,255,255,0.06);
}
.final-scores-list::-webkit-scrollbar { width: 7px; }
.final-scores-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 4px; }
.final-scores-list::-webkit-scrollbar-thumb { background: rgba(212,165,55,0.55); border-radius: 4px; }

.fs-row {
  display: grid;
  grid-template-columns: 26px minmax(90px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  padding: 7px 10px;
  color: #f2f8f4;
  border-radius: 9px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 5px;
}
.fs-row:last-child { margin-bottom: 0; }
/* Kazanan satırı belirgin şekilde altın/ışıltılı vurgulanır — "kim kazandı" bir bakışta anlaşılsın. */
.fs-row.is-winner {
  background: linear-gradient(90deg, rgba(212,165,55,0.24), rgba(212,165,55,0.09));
  border-color: rgba(212,165,55,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.fs-rank {
  font-weight: 800;
  color: #bcd9c2;
  text-align: center;
}
.fs-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fs-type {
  display: block;
  color: #bcd9c2;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
}
.fs-score {
  font-weight: 800;
  color: #ffd77a;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
  cursor: default; /* title (ipucu) olduğunu belli etsin — 2 ellik maçta 1.El+2.El dökümü burada */
}
.fs-money {
  font-size: 12px;
  font-weight: 600;
  color: #dce8de;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
  opacity: 0.95;
}
.fs-money .money-win { color: #7dffa0; font-weight: 800; }
.fs-money .money-loss { color: #ff9d92; font-weight: 800; }

/* ---------------- Seri Açma Alanı / Çift Açma Alanı ---------------- */
.meld-zones {
  display: flex;
  gap: 10px;
  width: 100%;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.meld-zone {
  background: linear-gradient(160deg, var(--panel-bg-1), var(--panel-bg-2));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 8px 10px;
  overflow-y: auto;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  /* Referans görseldeki soluk "101 PLUS" filigranına benzer, hafif ızgara dokusu */
  background-image:
    linear-gradient(160deg, var(--panel-bg-1), var(--panel-bg-2)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 26px);
}
/* KULLANICI İSTEĞİ: eski oransal (flex 2:1) paylaşım yerine artık Çift Açma Alanı'na SABİT bir
   genişlik veriliyor (önceki ~243px genişliğinden 81px düşülmüş hali: 162px) ve Seri Açma Alanı
   flex:1 ile KALAN TÜM alanı otomatik dolduruyor — yani düşen 81px doğrudan Seri'ye geçiyor.
   Sabit px kullanmak (oran yerine) çift alanının tam olarak istenen (3 çiftin sığdığı, fazla
   boşluk bırakmayan) dar genişlikte SABİT kalmasını garantiler. */
.series-zone { flex: 1 1 0%; min-width: 0; position: relative; }
.pair-zone { flex: 0 0 162px; min-width: 0; }

/* ÖNEMLİ: Sıra bizde iken (game.js #gameTable üzerine "my-turn" class'ı ekler/kaldırır) Seri/Çift
   Açma alanları BÜYÜTÜLÜR. transform:scale KÖŞEDEN büyütülüyor (transform-origin), ORTADAN DEĞİL —
   böylece büyüme YÖNÜ kontrol edilebiliyor:
     - Alt kenar SABİT kalır (origin'de "bottom") → ıstakanın üzerine ASLA binmez.
     - .series-zone (SOL kutu) sağ kenarı SABİT kalır (origin'de "right") → SADECE SOLA/YUKARI
       büyür, ortadaki gösterge/taş çekme alanına (.center-info) doğru büyümez.
     - .pair-zone (SAĞ kutu) sol kenarı SABİT kalır (origin'de "left") → SADECE SAĞA/YUKARI büyür,
       yine .center-info'ya doğru büyümez.
   Bu sayede yukarı doğru büyüme üstteki rakibi, yana doğru büyüme sol/sağ rakibi TAM kapatacak
   kadar büyütülebiliyor, gösterge/havuz ve ıstaka ise HİÇ etkilenmiyor. */
.meld-zone { transition: transform 0.22s ease, box-shadow 0.22s ease; }
.game-table.my-turn .meld-zones { position: relative; z-index: 30; }
/* Kullanıcı geri bildirimi: büyüyen alanların üzerine binmesi/opak arka plan YETERLİ DEĞİLDİ —
   rakip kutularının boyutu içeriğe göre değiştiği için bazı kısımları (özellikle üstteki rakip ve
   sol/sağ rakiplerin kenarları) hâlâ dışarıda kalıp görünüyordu. Bu yüzden sıra bizde iken rakip
   kutuları DOĞRUDAN GİZLENİYOR (position:absolute oldukları için layout'u etkilemez) — %100 garanti
   şekilde hiç görünmüyorlar, alan büyüklüğüne/örtüşmeye bağlı kalmadan. */
.game-table.my-turn .opp-top-row,
.game-table.my-turn .opp-left,
.game-table.my-turn .opp-right {
  display: none;
}
/* KULLANICI İSTEĞİ: "sıra bize gelince nasıl diğerleri gizleniyorsa oda görünmesin" — Bahis
   Tutarı rozeti de (sol üst köşe) rakip kutularıyla AYNI şekilde, sıra bizdeyken tamamen
   gizlenmeli. ÖNEMLİ (BUG FİX): bu kural TEK BAŞINA yeterli DEĞİLDİ — game.js rozete doğrudan
   inline "style.display" atadığı için (rakip kutularının aksine) inline stil bu CSS kuralını
   HER ZAMAN eziyordu, rozet sıra bizdeyken de görünmeye devam ediyordu. Kök çözüm game.js'e
   taşındı (updateGameState artık !state.is_my_turn şartını da kontrol ediyor) — bu kural
   artık sadece EK GÜVENCE (defense-in-depth) olarak duruyor. */
.game-table.my-turn .table-fee-badge {
  display: none !important;
}
.game-table.my-turn .series-zone,
.game-table.my-turn .pair-zone {
  z-index: 30;
  box-shadow: 0 12px 36px rgba(0,0,0,0.55), 0 0 0 2px rgba(212,165,55,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  /* ÖNEMLİ: Normalde .meld-zone yarı SAYDAM (panel-bg değişkenleri rgba, backdrop-filter:blur) —
     alan büyüyüp arkadaki rakip profillerinin/kutularının üzerine binince o rakipler BULANIK da
     olsa hâlâ hafifçe görünüyordu. Sıra bizde iken (büyüme anında) TAMAMEN OPAK bir arka plana
     geçilip backdrop-filter kapatılıyor ki arkasında HİÇBİR ŞEY görünmesin. */
  background-image:
    linear-gradient(160deg, #0d3648, #082230),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 26px);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Kullanıcı geri bildirimi: dikey (yukarı) büyüme FAZLAYDI — yatay (sol/sağ) ve dikey büyüme
   oranları AYRI ayarlandı (scaleX/scaleY farklı), dikey oran düşürüldü. */
/* KULLANICI İSTEĞİ: alanların EN ÜSTÜNDE fazla boşluk kalıyordu — dikey büyüme biraz daha
   artırılarak (1.18 → 1.3) alanın üst kenarı daha yukarıya, mevcut boş alanı doldurana kadar
   yayılıyor (origin hâlâ "bottom" olduğu için alt kenar/ıstaka hizası ASLA değişmiyor). */
/* KULLANICI İSTEĞİ: 1.3 fazla yukarı taşıdı — çok az aşağı indirildi (1.3 → 1.24). */
.game-table.my-turn .series-zone {
  transform-origin: right bottom;
  transform: scale(1.5, 1.24);
}
.game-table.my-turn .pair-zone {
  transform-origin: left bottom;
  transform: scale(1.5, 1.24);
}

/* KULLANICI İSTEĞİ: "Seri Açma Alanı" / "Çift Açma Alanı" başlıkları EKRANDA HİÇ GÖRÜNMESİN —
   alanların kendisi (ve i18n anahtarları/koddaki isimleri) yine aynı kalıyor, sadece bu görsel
   etiket kaldırıldı. display:none ile hem metin hem de ayırdığı boşluk (margin) tamamen kaybolur,
   .zone-columns bir üste kayıp alanın TAMAMINI kullanır. */
.zone-title {
  display: none;
}

.zone-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  align-content: flex-start;
}

/* Çift Açma Alanı — kullanıcı isteğiyle referans görseldeki gibi 3 EŞİT DİKEY BÖLMEYE ayrıldı
   (ince ayraç çizgileriyle). .pair-zone dikey flex yapılıp .zone-columns'a flex:1 verildi ki
   ayraç çizgileri alanın TAM YÜKSEKLİĞİNCE uzansın (içerik az olsa bile). */
.pair-zone {
  display: flex;
  flex-direction: column;
}
.pair-zone .zone-columns {
  flex: 1;
  min-height: 0;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content;
  gap: 6px 0;
  justify-items: center;
  align-content: flex-start;
  background-image:
    linear-gradient(to right, transparent calc(33.333% - 1px), rgba(255,255,255,0.18) calc(33.333% - 1px), rgba(255,255,255,0.18) 33.333%, transparent 33.333%),
    linear-gradient(to right, transparent calc(66.666% - 1px), rgba(255,255,255,0.18) calc(66.666% - 1px), rgba(255,255,255,0.18) 66.666%, transparent 66.666%);
}
/* KULLANICI İSTEĞİ: alan daraltıldığı (162px) için 3 sütunun rahat sığması adına sütun içi
   yatay dolgu biraz azaltıldı (4px → 2px), ve kutunun kendi yan dolgusu da (10px → 6px) biraz
   kısıldı — böylece 3 çift dar kutuya, fazla boşluk bırakmadan ama taşmadan sığıyor. */
.pair-zone .zone-columns > * { padding: 0 2px; }
.pair-zone { padding-left: 6px; padding-right: 6px; }
.pair-zone .zone-columns > .col-empty-hint { grid-column: 1 / -1; padding: 6px 0; }

/* KULLANICI İSTEĞİ: "seri dizme alanı 3 bölmeye ayır ama çizgi olmasın" — Seri Açma Alanı da
   Çift Açma Alanı gibi 3 EŞİT SÜTUNA bölündü (2 yerine), AMA aralarındaki dekoratif ayraç
   çizgileri (bkz. yukarıdaki .pair-zone .zone-columns background-image) BİLİNÇLİ OLARAK
   EKLENMEDİ — sadece boş/görünmez bir 3 sütunlu grid, çizgisiz. */
.series-zone .zone-columns {
  grid-template-columns: repeat(3, 1fr);
}
.series-zone .zone-columns > .col-empty-hint { grid-column: 1 / -1; }

/* KULLANICI İSTEĞİ: "seri perde (örn. 3-4-5-6 mavi) 2 işlekle (1-2 mavi) genişleyip sütunun
   sonuna/duvarına dayanınca, yeni eklenen taşlar görünmez oluyordu" — kök neden: .meld-row bir
   CSS GRID öğesi olduğu için varsayılan min-width:auto ile kendi içeriğinin TAM genişliğini
   İSTİYORDU; bu da uzun bir per BÜTÜN SÜTUNU zorlayıp genişletmesine (komşu perleri sıkıştırıp
   panelin kenarına/"duvarına" taşmasına, üstü örtülüp görünmez olmasına) yol açıyordu. Artık
   min-width:0 ile satır kendi sütununun genişliğine SIKIŞTIRILIYOR ve taştığında KENDİ İÇİNDE
   yatayda kayıyor (overflow-x:auto) — komşu perleri asla itmiyor/örtmüyor. Satır her yeniden
   çizildiğinde varsayılan kaydırma konumu (scrollLeft:0) BAŞTAN başladığı için, öne eklenen
   yeni işlek taşlar (ör. 1-2 mavi) HER ZAMAN görünür alanda kalır. */
.meld-row {
  display: flex;
  gap: 2px;
  justify-content: flex-start;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,165,55,0.5) transparent;
}
.meld-row::-webkit-scrollbar { height: 5px; }
.meld-row::-webkit-scrollbar-track { background: transparent; }
.meld-row::-webkit-scrollbar-thumb { background: rgba(212,165,55,0.5); border-radius: 3px; }
/* Grid'in kendisi de sütunları içeriğe göre germesin diye aynı önlem sütun düzeyinde de alınır. */
.zone-columns { min-width: 0; }
.zone-columns > * { min-width: 0; }
.meld-row:hover { background: rgba(212,165,55,0.15); }
/* Sürükle-bırak: elimizdeki taşı açık bir per (meld-row) üzerine getirdiğimizde belirgin,
   "buraya bırakılabilir" hissi veren altın renkli vurgu — taş At/Çek kutularıyla aynı dilde. */
.meld-row.drag-over {
  background: rgba(212,165,55,0.28);
  box-shadow: inset 0 0 0 1.5px rgba(212,165,55,0.6), 0 0 8px 1px rgba(212,165,55,0.35);
}

.col-empty-hint {
  font-size: 10px;
  color: rgba(255,255,255,0.25);
  text-align: center;
  padding: 6px 0;
}

/* ---------------- Istaka Hattı (atılan taş | çift diz | ıstaka | seri diz | taş at) ---------------- */
.istaka-line {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 480px) {
  /* ÖNEMLİ (dikey telefon tutunca bazı butonların kaybolma hatası — kök neden): .istaka-line'a
     eskiden verilen "overflow-x: auto" burada KALDIRILDI. Bir eksende (x) "auto" verilip
     diğerinde (y) hiçbir şey belirtilmezse, tarayıcı CSS spesifikasyonu gereği o ekseni de
     GİZLİCE "auto"ya çevirir (visible kalamaz) — bu da Çift Aç/Seri Aç butonlarının (.diag-pair
     içinde satırın ÜSTÜNE taşan, absolute konumlu .btn-round-open) satırın dışına taşan kısmının
     KIRPILMASINA yol açıyordu; tam da bu yüzden dikey tutunca (dar gerçek genişlik → bu breakpoint
     devrede) o butonlar "kayboluyordu". TÜM tahta zaten TEK bir JS ölçek faktörüyle (bkz.
     applyGameCanvasScale) küçültülüp büyütüldüğü için içerik HER ZAMAN sığar — yatay kaydırmaya
     hiç ihtiyaç yok, bu satır güvenle kaldırıldı. */
  .meld-buttons { overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; padding: 0 4px 2px; max-width: 100%; }
}

.side-drop-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  /* Kullanıcı isteği: Atılan Taş/Taş At biraz yukarı, ıstakanın ÜST hizasına "sıfır" (flush)
     otursun — satırın diğer öğeleri (yuvarlak butonlar, ıstaka) ortalı kalmaya devam ederken
     SADECE bu kutu kendi üst kenarını satırın en üstüne (ıstakanın üst kenarına) hizalıyor. */
  align-self: flex-start;
}

/* ÖNEMLİ: Kullanıcı isteğiyle Seri Diz/Çift Diz/Seri Aç/Çift Aç YUVARLAK butonlar biraz
   KÜÇÜLTÜLDÜ (92px → 66px) ve İÇİNDEKİ EMOJİ İKONU SİLİNDİ — artık sadece isim etiketi
   (.brs-label) gösteriliyor, ortalanmış ve gerekirse iki satıra sarılıyor. Metin data-i18n İLE
   DEĞİL sadece etiket span'ında taşınıyor (bkz. game.php'deki NOT). */
.btn-round-sort {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(160deg, var(--accent-navy-1), var(--accent-navy-2));
  color: #fff;
  border: 2px solid rgba(255,255,255,0.3);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  text-align: center;
  line-height: 1.15;
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn-round-sort .brs-label {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: normal;
}
.btn-round-sort:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.45); }
.btn-round-sort:active { transform: translateY(0) scale(0.95); }

/* ÖNEMLİ: KULLANICI İSTEĞİ "arka planla uyumlu ve profesyonel olsun" — eski parlak "gökyüzü mavisi"
   şeker rengi (masa ile tezat oluşturuyordu) TAMAMEN kaldırıldı; artık masanın kendi teal/lacivert
   paleti (--accent-navy-1/2, table-bg tonları) + ince ALTIN (gold) kenarlık/parıltı kullanılıyor —
   sitede zaten her yerde tekrar eden "koyu lacivert + altın vurgu" diliyle bire bir aynı aile. */
.btn-open-tile {
  width: auto;
  /* KULLANICI İSTEĞİ: butonlar ekranın sağ kenarına taşıyor/kırpılıyordu — taban boyut küçültüldü. */
  height: 38px;
  min-width: 108px;
  border-radius: 14px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  padding: 3px 12px 3px 5px;
  background: linear-gradient(180deg, #2d7ba3 0%, #1c5978 42%, #123f54 78%, #0a2833 100%);
  border: 1.5px solid rgba(212,165,55,0.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -6px 10px rgba(0,10,18,0.35), 0 4px 0 rgba(6,26,34,0.7), 0 8px 16px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.25);
}
.btn-open-tile:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(212,165,55,0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -6px 10px rgba(0,10,18,0.35), 0 4px 0 rgba(6,26,34,0.7), 0 10px 20px rgba(0,0,0,0.5), 0 0 14px 1px rgba(212,165,55,0.35);
}
.btn-open-tile:active { transform: translateY(1px) scale(0.97); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -4px 8px rgba(0,10,18,0.4), 0 1px 0 rgba(6,26,34,0.7), 0 3px 8px rgba(0,0,0,0.4); }
.btn-open-tile .brs-label {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: #fdf3d8;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
  white-space: nowrap;
}
.brs-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brs-icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 27px;
  padding: 0 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fbf6ea, #e9dfc7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -2px 3px rgba(0,0,0,0.15), 0 2px 3px rgba(0,0,0,0.35);
  border: 1px solid rgba(0,0,0,0.15);
}
.brs-digit {
  font-size: 12px;
  font-weight: 800;
  font-family: Roboto, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1;
}
/* Okey taşlarındaki geleneksel renk döngüsüne yakın: 1-sarı, 2-mavi, 3-siyah, çiftler ise
   AYNI renk (burada kırmızı) tekrarlanır — tamamen dekoratif, gerçek taş rengiyle bağlantısı yok. */
.brs-digit-a { color: #c9971f; }
.brs-digit-b { color: #1f6fa5; }
.brs-digit-c { color: #222; }
.brs-digit-d { color: #c0392b; }

/* KULLANICI İSTEĞİ: "Geri Topla"/"Geri Bırak" butonları da Seri Aç/Çift Aç'takiyle AYNI beyaz
   "taş ikonu" kutusunu kullanır, ama içinde rakam yerine geri-alma anlamına gelen bir ok (↩)
   simgesi var — bu ikisi (açma vs. geri alma) görsel olarak KARIŞMASIN diye kasıtlı. */
.brs-icon-tile-return { color: #123c2b; }
.brs-return-arrow {
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

/* KULLANICI İSTEĞİ ("aynı bottun tarzında olsun"): Geri Topla (Seri/Çift) ve Geri Bırak butonları
   Seri Aç/Çift Aç ile AYNI şekil/boyut/gölge dilini (.btn-open-tile) kullanır, sadece arka plan
   rengi farklıdır — "açma" (mavi) ile "geri alma" (altın) ve "iade" (mor) bir bakışta ayırt
   edilsin diye. .btn-open-tile'ın temel gradyan/kenarlık/gölge kurallarını DEĞİŞTİRMEDEN sadece
   background/border rengini override ediyor. */
.btn-open-collect {
  background: linear-gradient(180deg, #d9a441 0%, #b8860b 42%, #7a5a06 78%, #4a3604 100%);
  border-color: rgba(255,233,168,0.7);
}
.btn-open-collect:hover { border-color: rgba(255,233,168,0.95); }
.btn-open-return {
  background: linear-gradient(180deg, #8a72c9 0%, #6a4fa0 42%, #453168 78%, #241a3a 100%);
  border-color: rgba(216,201,255,0.6);
}
.btn-open-return:hover { border-color: rgba(216,201,255,0.9); }

/* ÖNEMLİ: "Geri Topla - Seri/Çift" etiketi sayaç eklenince ("(42/101)" gibi) OLDUKÇA
   uzayabiliyor — .btn-open-tile'ın taban davranışı (white-space:nowrap, height:38px sabit) ile
   bu uzun metin butonu SAĞA doğru aşırı genişletip #openBtnStack'in sağındaki rakip kutusuna
   (#oppRight) neredeyse yapışıyordu. Bu yüzden SADECE bu 2 buton için: metin 2 satıra sarılabilir
   (white-space:normal), genişlik bir ÜST SINIRLA (max-width) kesilir, yükseklik sabit 38px yerine
   içeriğe göre esner (min-height) — böylece uzun metin yana taşmak yerine ALTA sarılır. */
.btn-open-collect, .btn-open-return {
  height: auto;
  min-height: 38px;
  max-width: 150px;
  padding: 4px 10px 4px 5px;
}
.btn-open-collect .brs-label, .btn-open-return .brs-label {
  white-space: normal;
  font-size: 10.5px;
  line-height: 1.2;
  text-align: left;
}

/* ÖNEMLİ: Sıra bizde iken "Seri Aç" (#btnOpenSeries) ve "Çift Aç" (#btnOpenPairs) butonları biraz
   BÜYÜTÜLÜR — hangi diag-pair'de (sol/sağ, çapraz/taban) olduklarına bakılmaksızın kendi ID'leri
   ile hedeflenir, çünkü kullanıcı isteğiyle bu iki buton konum değiştirebiliyor (bkz. game.php). */
.game-table.my-turn #btnOpenSeries,
.game-table.my-turn #btnOpenPairs {
  /* KULLANICI İSTEĞİ: 1.2 büyüme + zaten büyük buton boyutu ekranın sağ kenarına taşıyordu —
     büyüme oranı küçültüldü (bkz. ayrıca .btn-open-tile'ın küçültülen taban boyutu). */
  transform: scale(1.08);
  z-index: 8;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Çift Diz/Seri Diz artık kendi kutusunun (Atılan Taş / Taş At) TAM ALTINDA — .side-drop-zone
   zaten dikey flex olduğu için ekstra bir konumlandırmaya gerek yok, sadece küçük bir üst boşluk. */
.btn-round-sort-under {
  margin-top: 2px;
}
/* ÖNEMLİ (KULLANICI İSTEĞİ): Çift Diz/Seri Diz artık YUVARLAK değil KARE — .btn-round-sort'un
   temel navy degrade/gölge/kenarlığını KORUYOR, sadece şekli (border-radius) ve iç dolguyu
   değiştiriyor; içine Seri Aç/Çift Aç'takiyle AYNI küçük "taş ikonu" (bkz. .brs-icon-tile)
   yerleştiriliyor, ayrı bir metin etiketi YOK (açıklama sadece title tooltip'inde). */
.btn-sort-square {
  border-radius: 13px;
  padding: 3px;
  gap: 2px;
  /* ÖNEMLİ: temel .btn-round-sort flex-direction BELİRTMİYOR (varsayılan "row") — tek çocuklu
     (sadece etiket) yuvarlak butonlarda bu fark etmiyordu, ama burada iki çocuk (ikon + etiket)
     olduğu için AÇIKÇA "column" verilmezse yan yana dizilip KULLANICI İSTEĞİNİN AKSİNE "ikonun
     yanına" yazı gelirdi. Düzeltme: dikey (ikon ÜSTTE, etiket ALTTA) istiflensin diye column. */
  flex-direction: column;
}
.btn-sort-square .brs-icon-tile {
  height: 26px;
  padding: 0 4px;
}
.btn-sort-square .brs-digit {
  font-size: 12px;
}
/* KULLANICI İSTEĞİ: ikonun altına "Çift Diz"/"Seri Diz" metni geri eklendi — ikonla birlikte
   sığması için etiket biraz küçültüldü. */
.btn-sort-square .brs-label {
  /* KULLANICI İSTEĞİ: yazı biraz daha belirgin olsun — boyut artırıldı, kontrast/parlaklık
     için beyaza yakın bir ton ve daha net bir gölge eklendi. font-weight zaten standart
     maksimum olan 900'de olduğundan, "biraz daha kalın" isteği için ince bir metin konturu
     (-webkit-text-stroke) eklendi — harfler ekstra kalın/dolgun görünür. */
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  -webkit-text-stroke: 0.4px rgba(255,255,255,0.9);
}

/* ÖNEMLİ: "Seri Aç"/"Çift Aç" kullanıcı isteğiyle SAĞ rakibin (#oppRight) hemen üstüne, alt alta
   taşındı. #opp-right ile AYNI absolute koordinat çerçevesinde (#gameCanvas-inner, 1488x660)
   konumlanıyor. SADECE sıra bizde iken görünür — game.js #gameTable'a "my-turn" class'ı
   ekleyip/kaldırdığında bu blok görünür/gizli olur (bkz. updateGameState). Dikey/yatay konum
   deneme-yanılmayla ayarlandı; #oppRight'ın gerçek yüksekliği içeriğe göre değiştiği için TAM
   piksel hizası gerekirse ince ayar istenebilir. */
.open-btn-stack {
  /* ÖNEMLİ: KULLANICI İSTEĞİ "geçişler donatılsın" — artık display:none/flex ile ANİDEN
     belirip kaybolmuyor, opacity+transform ile YUMUŞAKÇA süzülerek giriyor/çıkıyor.
     display:flex HER ZAMAN sabit (transition'ın çalışabilmesi için gerekli — display'e geçiş
     uygulanamaz), görünürlük opacity/pointer-events ile yönetiliyor. */
  display: flex;
  position: absolute;
  /* KULLANICI İSTEĞİ: butonlar (özellikle sıra bizde iken büyüyünce) ekranın sağ kenarına çok
     yakın kalıp kırpılıyor/taşıyor gibi görünüyordu — sağdan boşluk artırıldı, butonlar da
     aşağıda küçültüldü (bkz. .btn-open-tile). */
  /* KULLANICI İSTEĞİ: butonlar Çift Açma Alanı panelinin kenarına çok yakın/üstüne biniyordu —
     biraz sağa (canvas'ın gerçek sağ kenarına doğru) kaydırıldı. */
  right: 44px;
  /* KULLANICI İSTEĞİ ("butonları biraz aşağıya taşı" — işaretli ekran görüntüsüyle): önceki
     330px, Geri Topla/Geri Bırak eklendikten sonra yığını gereğinden fazla YUKARI itmişti
     (üstünde çok boşluk kalıyordu). 260px'e düşürülerek yığın biraz AŞAĞI kaydırıldı — 4-5
     buton + boşluklar hâlâ rahatça 660px'lik kanvasa sığıyor (bkz. yukarıdaki hesap). */
  bottom: 260px;
  flex-direction: column;
  /* ÖNEMLİ: sıra bizde iken Seri Aç/Çift Aç scale(1.08) ile büyüyor (bkz. aşağıdaki kural) —
     eskiden sadece 2 buton olduğu için boşluk 22px'ti; artık altta 3 buton DAHA (Geri Topla x2 +
     Geri Bırak) eklendiği için toplam yükseklik kanvasa (660px) sığsın diye boşluk KULLANICI
     İSTEĞİ doğrultusunda 14px'e düşürüldü — 5 buton x ~38px + 4 boşluk x 14px = ~246px, kolayca
     sığıyor. */
  gap: 14px;
  z-index: 15;
  opacity: 0;
  transform: translateY(14px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(.34, 1.56, .64, 1);
}
/* KULLANICI İSTEĞİ ("altına da geri topla ihtiyaç olduğunda çıksın"): Geri Topla (Seri/Çift) ve
   Geri Bırak butonları ile Seri Aç/Çift Aç arasına görsel bir "bunlar ayrı bir grup" hissi
   vermek için sadece EK bir üst boşluk eklendi (kenarlık/padding EKLENMEDİ — .btn-open-tile'ın
   sabit 38px content-box yüksekliği content-box olduğu için border/padding eklemek butonun
   TOPLAM yüksekliğini büyütüp diğerleriyle hizasını bozardı; margin ise layout kutusunun
   DIŞINDA kaldığı için yükseklik/hizalamayı ETKİLEMEZ). */
#btnCollectBack { margin-top: 8px; }
.game-table.my-turn .open-btn-stack {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.dz-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #b7ccb9;
  font-weight: 700;
}
/* KULLANICI İSTEĞİ: eski hâli (düz beyaz, KESİKLİ/dashed kenarlıklı, jenerik "placeholder kutusu"
   görünümü) masanın lacivert/turkuaz zeminiyle UYUMSUZ ve amatörce duruyordu. Artık masaya
   OYULMUŞ/gömülü bir göz gibi — zeminle AYNI koyu turkuaz tonlarından, içbükey (inset) gölgeyle
   derinlik veren, DÜZ (dashed değil) ince kenarlıklı — çok daha profesyonel/entegre bir görünüm. */
.dz-tile-holder {
  width: 48px;
  height: 66px;
  border-radius: 9px;
  background: radial-gradient(circle at 50% 32%, rgba(8,42,54,0.6), rgba(4,22,30,0.8));
  box-shadow: inset 0 3px 9px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
/* Rakip alanlarındaki (üst/sol/sağ) son atış kutusu — AYNI dekor, sadece küçük opponent alanına
   sığması için biraz daha kompakt boyutlandırılmıştır. */
.opp-discard-holder {
  width: 40px;
  height: 58px;
  margin-top: 2px;
  margin-right: 6px;
}
.dz-discard-target.drag-over .dz-tile-holder,
.dz-discard-target.click-armed .dz-tile-holder {
  background: radial-gradient(circle at 50% 32%, rgba(212,165,55,0.32), rgba(212,165,55,0.14));
  border-color: #d4a537;
  box-shadow: inset 0 3px 9px rgba(0,0,0,0.35), 0 0 10px 1px rgba(212,165,55,0.45);
}

/* ---------------- Benim alanım ---------------- */
.my-zone {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 0 10px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35) 40%);
  transition: background 0.15s, box-shadow 0.15s;
}
/* Atılan taştan sürükleyerek çekerken, taşı kendi alanımızın (ıstakamızın) üzerine getirdiğimizde
   "buraya bırakırsan çekersin" geri bildirimi — tüm alanı yumuşak bir altın parıltıyla çerçeveler. */
.my-zone.drag-over {
  background: linear-gradient(180deg, rgba(212,165,55,0.1), rgba(212,165,55,0.22) 40%);
  box-shadow: inset 0 0 0 1.5px rgba(212,165,55,0.45);
}

.meld-buttons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
}
/* NOT: Seri Diz/Çift Diz butonları artık ıstakanın yanlarına taşındığı için (bkz. .btn-side-stack)
   burada "Geri Topla" butonlarına yer açmak amacıyla eskiden #btnOpenPairs'a uygulanan sabit
   130px'lik sağ boşluk KALDIRILDI — artık gereksiz, satırda sadece Seri Aç/Çift Aç/Geri Topla
   butonları kalıyor ve doğal olarak ortalanıyor. */
.btn-meld {
  white-space: nowrap;
  background: linear-gradient(160deg, var(--accent-navy-1), var(--accent-navy-2));
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 6px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn-meld:hover { transform: translateY(-2px); box-shadow: 0 9px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.3); }
/* KULLANICI İSTEĞİ: bu butonlarda basınca HİÇBİR görsel tepki yoktu (eskiden sadece hover'ı iptal
   ediyordu) — artık gerçek bir "basılma" hissi için küçülüp gölgesi sıkışıyor. */
.btn-meld:active {
  transform: translateY(1px) scale(0.96);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  filter: brightness(0.94);
}
.btn-meld.btn-finish { background: linear-gradient(160deg, #c0392b, #8c2a20); }
.btn-meld.btn-collect { background: linear-gradient(160deg, #b8860b, #7a5a06); }
.btn-meld.btn-return-side { background: linear-gradient(160deg, #6a4fa0, #453168); }

/* ---------------- Istaka (profesyonel/modern) ---------------- */
.istaka {
  position: relative;
  /* Kullanıcı isteğiyle ıstakanın TOPLAM uzunluğu (kenarlık+padding dahil) 844px'e sabitlendi;
     içindeki gözler/taşlar da bu büyümeye eş oranda (yaklaşık ×1.32) büyütüldü — bkz.
     .istaka-slot ve .istaka .tile. */
  width: 844px;
  box-sizing: border-box;
  background: linear-gradient(180deg, var(--wood-1) 0%, var(--wood-2) 55%, var(--wood-3) 100%);
  border: 2px solid var(--wood-3);
  border-radius: 10px;
  padding: 11px 13px;
  box-shadow: 0 -6px 18px rgba(0,0,0,0.5), inset 0 2px 6px rgba(255,255,255,0.35), inset 0 -3px 8px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Referans görseldeki metal uç başlıkları (rafın iki ucundaki koyu yuvarlak) */
.istaka::before, .istaka::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8e8e8, #6b6b6b 70%, #333 100%);
  transform: translateY(-50%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
  z-index: 3;
}
.istaka::before { left: 4px; }
.istaka::after { right: 4px; }

/* SIRA SİZDEYKEN GÖRSEL GERİ SAYIM: 30 saniyelik kuralın sunucu tarafında sessizce işlemesine
   karşılık, burada ıstakanın etrafında zengin, parlamalı bir altın şerit gösterilir — tam dolu
   (30sn) başlar, süre ilerledikçe conic-gradient ile SÖNEREK azalır (saat yönünde, tam bir tur).
   Sadece sıra sizdeyken ve JS'in .active sınıfı eklediği anda görünür; --istaka-progress JS
   tarafından her saniye güncellenir (100 = dolu/yeni başladı, 0 = süre bitti). İki katman
   kullanılır: arkada yumuşak bir "glow" (bulanık, aynı ilerlemeyle), önde keskin halka —
   modern, gösterişli bir "premium" his verir. */
.istaka-glow-wrap { position: absolute; inset: -5px; border-radius: 14px; pointer-events: none; opacity: 0; transition: opacity 0.3s; z-index: 4; }
.istaka-glow-wrap.active { opacity: 1; }
.istaka-glow-wrap::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 14px;
  padding: 4px;
  background: conic-gradient(from 0deg,
    #ffe08a calc(var(--istaka-progress) * 1%),
    transparent 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  filter: blur(6px) saturate(1.3);
  opacity: 0.9;
  animation: istaka-glow-pulse 1.8s ease-in-out infinite;
}
.istaka-glow-wrap.urgent::before {
  background: conic-gradient(from 0deg, #ff8a65 calc(var(--istaka-progress) * 1%), transparent 0);
  animation-duration: 0.7s;
}
@keyframes istaka-glow-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.istaka-countdown-ring {
  --istaka-progress: 100;
  position: absolute;
  inset: -5px;
  border-radius: 14px;
  padding: 3px;
  background: conic-gradient(from 0deg,
    #fff6d8 0%,
    #ffd76a calc(var(--istaka-progress) * 0.3%),
    #f0a830 calc(var(--istaka-progress) * 0.7%),
    #e0851a calc(var(--istaka-progress) * 1%),
    transparent 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  z-index: 5;
}
.istaka-countdown-ring.active { opacity: 1; }
.istaka-countdown-ring.urgent {
  background: conic-gradient(from 0deg,
    #fff0e8 0%,
    #ff9a6a calc(var(--istaka-progress) * 0.3%),
    #ef6a4a calc(var(--istaka-progress) * 0.7%),
    #d8432a calc(var(--istaka-progress) * 1%),
    transparent 0);
}

.istaka-row {
  display: flex;
  gap: 4px;
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.1));
  padding: 4px 5px 0;
  min-height: 76px;
  overflow: visible;
  touch-action: manipulation;
  position: relative;
}
.istaka-row.istaka-top { border-radius: 6px 6px 0 0; padding-bottom: 1px; z-index: 1; }
.istaka-row.istaka-bottom { border-radius: 0 0 6px 6px; padding-top: 1px; z-index: 2; }

.istaka-slot {
  width: 50px;
  height: 71px;
  border-radius: 5px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: background 0.15s, border-color 0.15s;
}
.istaka-slot.drag-over {
  background: rgba(212,165,55,0.18);
  border: 1.5px dashed #d4a537;
}

/* ---------------- Taş (tile) tasarımı ---------------- */
/* ====================================================================
   KULLANICI İSTEĞİ: "taşları tam gerçekçi yap" — düz/basit beyaz kartlardan, gerçek bir okey
   taşının (fildişi/bakalit plastik blok) hissini veren, belirgin KALINLIK/DERİNLİK algısı olan
   bir görünüme geçildi:
   - Yüzey artık nötr beyaz değil, gerçek taşlardaki gibi hafif sıcak fildişi/krem tonu (üstte
     neredeyse beyaza yakın parlak, altta hafif kirli-krem gölgeli) — tek düz renk değil, ışığın
     üstten vurduğu bir plastik yüzey hissi.
   - "0 2px 0 <koyu-krem>" şeklindeki SERT (blursuz) gölge, taşın altında gerçek bir KALINLIK/BASAMAK
     varmış hissi verir (klavye tuşu/skeuomorfik buton tekniği) — taş artık kağıt gibi değil, küçük
     bir blok gibi duruyor.
   - Kenarlarda hafif iç gölge/parlaklık dengesi artırılarak taşın hafif KAVİSLİ/yuvarlatılmış üst
     yüzeyi olduğu hissi güçlendirildi (gerçek taşların üstü hafif bombelidir, düz değildir). */
.tile {
  width: 34px;
  height: 52px;
  border-radius: 7px;
  background:
    radial-gradient(140% 90% at 28% 6%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(165deg, #fffdf7 0%, #f8f3e6 42%, #ece3cd 76%, #ddd2b4 100%);
  border: 1px solid #c3b795;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -6px 7px rgba(120,95,40,0.2),
    inset 1px 0 0 rgba(255,255,255,0.5),
    inset -1px 0 0 rgba(120,95,40,0.12),
    0 2px 0 rgba(191,176,138,0.9),
    0 1px 1px rgba(0,0,0,0.22),
    0 5px 8px rgba(0,0,0,0.42);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* ÖNEMLİ (rakamlar bazı telefonlarda HÂLÂ "italik/ince" görünüyordu — 2. kök neden): ilk
     düzeltmede serif fontu sans-serif ile değiştirmiştik ama font-weight'i "800" bırakmıştık.
     800 gibi standart olmayan bir ağırlık, bazı Android cihazlarda (özellikle OEM'e özel, sadece
     birkaç SABİT ağırlık dosyası (400/700/900) yüklü sistem fontlarında) GERÇEK bir yüz
     bulunamadığı için tarayıcı bunu ALGORİTMİK olarak "sahte kalınlaştırma" (faux-bold) ile
     simüle etmeye çalışıyor — bu simülasyon bazı motorlarda glifleri hafifçe EĞEREK/KAYDIRARAK
     yapılıyor, İTALİK GİBİ bir görünüme yol açıyor (bilgisayarda gerçek 800 ağırlık genelde
     bulunduğu için sorun görünmüyordu). Düzeltme: HER platformda kesin olarak GERÇEK bir yüzü
     bulunan standart bir ağırlığa ("700" / bold) geçildi ve font-synthesis "none" ile tarayıcının
     olmayan bir ağırlığı/stili ALGORİTMİK OLARAK UYDURMASI TAMAMEN ENGELLENDİ — artık ya gerçek
     kalın bir yüz kullanılıyor ya da (çok nadir) normal ağırlık, ama ASLA sahte/eğik simülasyon.
     KULLANICI İSTEĞİ (yeni): "bütün cihazlarda aynı görünsün" — bu artık cihazın KENDİ sistem
     fontuna güvenmek yerine (bkz. game.php <head>) Google Fonts'tan indirilen TEK bir Roboto 900
     yüzüne dayanıyor; "Roboto" ismi cihazda zaten kurulu olsa bile CSS @font-face önceliği
     nedeniyle her zaman İNDİRİLEN yüz kullanılır — böylece Android/iOS/Windows/macOS'ta piksel
     piksel AYNI rakam görünür. Sistem fontu zinciri sadece font henüz yüklenmeden önceki an için
     (FOUT) yedek olarak bırakıldı. */
  font-family: Roboto, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-synthesis: none;
  /* KULLANICI İSTEĞİ: rakamlar biraz büyütüldü (19px → 21px; ıstakada ve mini taşlarda da orantılı
     olarak büyütüldü, bkz. .istaka .tile / .tile-mini). */
  font-size: 21px;
  /* KULLANICI İSTEĞİ: "taşa KAZILMIŞ gibi görünsün" — düz baskı/mürekkep hissi yerine, gerçek bir
     OYUK/GRAVÜR illüzyonu: rakamın hemen ÜSTÜNDE koyu bir "gölge dudağı" (oyuğun üst kenarı),
     hemen ALTINDA açık bir "parıltı" (ışığın oyuğun tabanına vurduğu kenar) — göz bunu rakamın
     yüzeyden kazınmış bir girinti olduğu şeklinde okur. */
  text-shadow:
    0 -1.4px 0.5px rgba(0,0,0,0.55),
    0 1.4px 0.5px rgba(255,255,255,0.8),
    0 0 1px rgba(0,0,0,0.25);
  cursor: grab;
  position: relative;
  transition: transform 0.12s;
  /* ÖNEMLİ: mobilde taşlara dokununca "geç algılanma" hissi, tarayıcının çift-dokunuşla
     yakınlaştırmayı (zoom) ayırt etmeye çalışırken eklediği ~300ms'lik gecikmeden kaynaklanabilir.
     Gerçek sürükleme (native HTML5 drag) mobil tarayıcılarda zaten dokunmatik olarak düzgün
     çalışmıyor — buradaki asıl mobil etkileşim "dokun-seç, dokun-yerleştir" akışıdır (bkz. JS'teki
     tıkla-bırak mantığı). Bu yüzden touch-action:none yerine "manipulation" kullanılır — tarayıcı
     çift-dokunuş yakınlaştırmasını beklemeden dokunuşu ANINDA bir tıklama olarak işler. */
  touch-action: manipulation;
  overflow: hidden;
  /* BULANIKLIK DÜZELTMESİ (ek cila): büyütülmüş (scale edilmiş) katmanlarda yazı tipi
     yumuşatmasının netliğini artırır — özellikle seri/çift açma alanındaki küçük .tile-mini
     yazıları için fark yaratır. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 46%;
  /* KULLANICI İSTEĞİ "tam gerçekçi": düz doğrusal parlaklık yerine, hafif KAVİSLİ bir cam/plastik
     yüzey ışığı hissi veren, sol-üstte yoğunlaşan bir radial parıltı eklendi. */
  background:
    radial-gradient(80% 100% at 25% 0%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.35) 45%, rgba(255,255,255,0) 75%),
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
/* ====================================================================
   KULLANICI İSTEĞİ: "Phaser/PixiJS (WebGL) kalitesinde geçişler" — motor DEĞİŞTİRİLMEDİ (site
   PHP+HTML+CSS olarak kalıyor, riskli/büyük bir yeniden yazım yerine kullanıcı bunu seçti), ama
   ıstakada/masada/atışlarda/perlerde HER taş hareketi artık yumuşak bir "beliriyor" (pop-in)
   animasyonuyla giriyor — statik "aniden belirme" yerine hafif sıçramalı, oyun motoru hissi veren
   bir giriş. Bu SADECE gerçekten YENİ/DEĞİŞEN taş dizilimlerinde oynatılır (istaka ve perler kendi
   "imza" karşılaştırmasıyla — bkz. JS'teki lastIstakaSignature/lastMeldsSignature — sadece
   değiştiğinde yeniden çizilir; atılan taş kutuları ise .tile-enter class'ı SADECE taş ID'si
   gerçekten değiştiğinde eklenir, bkz. renderDiscardPile) — yoksa her pollda (1.8sn'de bir)
   gereksiz yere titreşim/flicker olurdu. */
@keyframes tilePopIn {
  0%   { opacity: 0; transform: scale(0.55) translateY(10px) rotate(-6deg); }
  60%  { opacity: 1; transform: scale(1.08) translateY(-2px) rotate(1.5deg); }
  100% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
}
/* ÖNEMLİ DÜZELTME: Bu animasyon ÖNCEDEN ".istaka-slot .tile, .meld-row .tile" seçicileriyle HER
   yeniden çizimde TÜM taşlara uygulanıyordu — ıstaka/perler "imzaları değiştiyse" tamamen
   yeniden kuruluyor (bkz. renderIstaka/renderMelds), bu yüzden SÜRÜKLE-BIRAK ile sadece TEK bir
   taşı taşısanız bile SATIRDAKİ/PERDEKİ TÜM taşlar yeniden "pop" edip YANIP SÖNÜYORMUŞ gibi
   görünüyordu — kullanıcı bunu haklı olarak "profesyonel değil" buldu. DÜZELTME: artık animasyon
   SADECE ".tile-enter" class'ı elle eklenen taşlarda oynuyor, ve bu class JS tarafından SADECE
   gerçekten YENİ (daha önce o alanda hiç olmayan, örn. yeni çekilen/açılan) bir taş için ekleniyor
   — var olan bir taş sadece YER DEĞİŞTİRİYORSA (sürükle-bırak, otomatik dizme, per içinde kaydırma)
   HİÇBİR animasyon oynamıyor, sessizce yeni konumunda beliriyor (native drag zaten kendi görsel
   geri bildirimini veriyor). Bkz. renderIstaka/renderMelds/renderDiscardPile içindeki
   knownUids/dedup karşılaştırmaları. */
.tile.tile-enter {
  animation: tilePopIn 0.32s cubic-bezier(.34, 1.56, .64, 1);
}

.tile:active { cursor: grabbing; }
/* MOBİL DOKUNMA GERİ BİLDİRİMİ: parmağın bir taşa değdiği anda ANINDA görsel tepki verir —
   sunucudan yanıt beklemeden, "dokunuşum algılandı" hissini verir. Ağ gecikmesi olsa bile
   arayüz canlı/duyarlı hissettirir. */
.tile:active {
  transform: scale(0.93);
  filter: brightness(1.12);
  transition: transform 0.08s, filter 0.08s;
}
/* ====================================================================
   KULLANICI İSTEĞİ: eski native HTML5 sürükle-bırak "demode" bulundu (tarayıcının kendi yarı
   saydam "hayalet kare" önizlemesi) — artık gerçek bir taşı ELİNİZLE kaldırıp taşıyormuş hissi
   veren, pointer olaylarına dayalı ÖZEL bir sistem var (bkz. game.js startTilePointerDrag).
   ==================================================================== */
/* KULLANICI İSTEĞİ: kaynak gözdeki taş sürüklerken SAYDAMLAŞIYORDU (soluk/gri "hayalet iz") —
   kullanıcı bunu istemedi, taş TAMAMEN NORMAL/OPAK görünmeli. Artık hiçbir soluklaşma/gri tonlama
   yok; taş, fareyi takip eden kopyası (bkz. .tile-ghost) oradan kalkıp gittiği sürece kendi
   gözünde SIRADAN, tam opak bir taş gibi durmaya devam ediyor. */
.tile.tile-placeholder {
  opacity: 1;
}
/* Fareyi/parmağı TAKİP EDEN, taşın kendi görünümünün klonu — position:fixed, transform JS
   tarafından her frame'de doğrudan güncelleniyor (CSS transition KULLANILMIYOR, yoksa takip
   gecikmeli/"yapışkan" hissettirirdi — sadece gölge/parlaklık gibi ikincil özelliklere geçiş
   uygulanır). Belirgin biçimde büyütülmüş, derin bir gölge ve hafif bir "eğilme" ile gerçek bir
   nesneyi havada taşıma hissi veriyor. */
.tile-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
  box-shadow: 0 22px 34px rgba(0,0,0,0.55), 0 4px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.9);
  filter: brightness(1.06);
  cursor: grabbing;
}
/* Sürüklenen taş BIRAKILDIĞINDA (yeni gözüne yerleştiğinde) kısa bir "oturma" (settle) sıçraması —
   JS tarafından (bkz. moveTileToSlot) SADECE taşınan taşa eklenip birkaç yüz ms sonra kaldırılır;
   pop-in (.tile-enter) ile KARIŞTIRILMASIN — bu "yeni taş" değil, "yer değiştiren taş" için. */
@keyframes tileSettle {
  0%   { transform: scale(1.18) translateY(-4px); }
  55%  { transform: scale(0.94) translateY(1px); }
  100% { transform: scale(1) translateY(0); }
}
.tile.tile-settle {
  animation: tileSettle 0.28s cubic-bezier(.34, 1.56, .64, 1);
}
.tile.selected {
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 0 0 2px #d4a537, 0 10px 18px rgba(0,0,0,0.55), 0 0 14px rgba(212,165,55,0.65);
  z-index: 20;
}
.tile.drawn-tile { outline: 2px solid #6fe08c; outline-offset: 1px; }

/* KULLANICI İSTEĞİ (GERİ ALINDI): "tam saf" renklere (#ffff00/#ff0000/#0000ff/#000000) bir
   önceki turda geçilmişti, kullanıcı hemen ardından bu değişikliği geri almamızı istedi —
   eski, hafif tonlanmış/okunurluğu daha iyi olan renklere dönüldü. */
.tile.color-sari { color: #d19b00; }
.tile.color-kirmizi { color: #c0392b; }
.tile.color-mavi { color: #1f5fbf; }
.tile.color-siyah { color: #1c1c1c; }

/* Referans görseldeki gibi rakam altında küçük gri "top" işareti (fake-okey ve mini taşlar hariç) */
.tile:not(.fake-okey):not(.tile-mini)::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f5f5f5, #b9b9b4 70%, #8f8f89 100%);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,0.15);
}

.tile.real-okey {
  background:
    radial-gradient(140% 90% at 28% 6%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(165deg, #fffdf7 0%, #f7f2e2 45%, #ece2c8 100%);
  border-color: #2a5f8f;
  color: #1c1c1c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -4px 5px rgba(0,0,0,0.1),
    0 2px 0 rgba(191,176,138,0.9),
    0 0 0 2px rgba(42,95,143,0.35),
    0 4px 7px rgba(0,0,0,0.4);
}

.tile.fake-okey {
  background:
    radial-gradient(140% 90% at 28% 6%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(160deg, #fffae8 0%, #f8e9b0 45%, #edd27a 100%);
  border-color: #c99a1f;
}
.tile.fake-okey::after {
  content: "★";
  font-size: 18px;
  color: #a87209;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  position: relative;
  z-index: 1;
}

/* Istaka'nın 844px'e büyütülmesiyle EŞ ORANLI olarak sadece ıstaka İÇİNDEKİ taşlar büyütüldü
   (indikatör/havuz/atılan taş gibi diğer alanlardaki .tile'lar ETKİLENMEDİ). */
.istaka .tile {
  /* ÖNEMLİ: yeni pointer tabanlı sürükleme sisteminin dokunmatikte GÜVENİLİR çalışması için
     (tarayıcının kendi kaydırma/yakınlaştırma hareketleriyle çakışmasın diye) sadece ıstakadaki
     (sürüklenebilir) taşlarda touch-action "none" — diğer alanlardaki (per, atılan taş) taşlar
     zaten sürüklenemediği için "manipulation" (hızlı tıklama için) olarak kalıyor. */
  touch-action: none;
  width: 45px;
  height: 68px;
  /* KULLANICI İSTEĞİ: rakamlar büyütüldü (25px → 28px). */
  font-size: 28px;
  border-radius: 9px;
  /* KULLANICI İSTEĞİ: "ıstakadaki taşlara 3D görünüm ekle" — ıstaka taşları en büyük ve en çok
     bakılan taşlar olduğu için burada .tile'ın taban 3D/kalınlık efekti daha da BELİRGİNLEŞTİRİLDİ:
     alttaki sert "basamak" gölgesi kalınlaştırıldı ve altına ikinci, daha koyu bir "temel" katmanı
     eklendi — sanki taş masadan/ıstakadan hafifçe yükseliyormuş gibi gerçek bir blok hissi verir. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -7px 8px rgba(120,95,40,0.22),
    inset 1px 0 0 rgba(255,255,255,0.5),
    inset -1px 0 0 rgba(120,95,40,0.14),
    0 1px 0 rgba(224,209,168,0.95),
    0 3px 0 rgba(168,150,105,0.85),
    0 2px 2px rgba(0,0,0,0.22),
    0 8px 12px rgba(0,0,0,0.48);
}
.istaka .tile::after { bottom: 8px; width: 8px; height: 8px; }
.istaka .tile.fake-okey::after { font-size: 24px; }
/* KULLANICI İSTEĞİ "yazılar modern ve güzel görünsün": ıstakada en büyük/en çok bakılan rakamlar —
   biraz daha sıkı (modern) harf aralığı ve daha net bir kontur/derinlik katmanı ile hem şık hem
   okunaklı hale getirildi. */
.istaka .tile .tnum, .istaka .tile > span {
  letter-spacing: -0.3px;
}
/* KULLANICI İSTEĞİ: ıstakadaki taşlar en büyük olduğu için "kazınmış" oyuk hissi burada biraz
   daha derin/belirgin — aynı prensip (üstte gölge dudağı, altta ışık parıltısı), sadece ölçek
   büyüdüğü için mesafeler orantılı olarak artırıldı. */
.istaka .tile {
  text-shadow:
    0 -1.8px 0.6px rgba(0,0,0,0.58),
    0 1.8px 0.6px rgba(255,255,255,0.82),
    0 0 1.5px rgba(0,0,0,0.25);
}

/* KULLANICI İSTEĞİ: Seri/Çift Açma alanlarındaki taşlar küçültüldü (mobil 17x26→14x23, masaüstü
   22x34→18x30) — bu SAYEDE aynı sabit alana daha fazla taş/per sığıyor (satır başına daha fazla
   .tile-mini yerleşiyor, daha az dikey yer kaplıyor ve daha az kaydırma gerekiyor).
   DÜZELTME (KULLANICI BİLDİRİMİ: "masaya açılan taşlar biraz bulanık gösteriyor"): kök neden —
   .tile-mini sadece width/height/font-size'ı değiştiriyordu, ama .tile'ın (34x52'lik BÜYÜK taş
   için ayarlanmış) box-shadow VE text-shadow değerlerini OLDUĞU GİBİ miras alıyordu. O gölge/oyuk
   efektindeki bulanıklık (blur) yarıçapları büyük taşta orantılıyken, bu küçücük taşlarda (14-18px)
   NİSPETEN ÇOK BÜYÜK kalıyor ve hem kenarları hem rakamları "bulanık/dağınık" gösteriyordu. Artık
   .tile-mini kendi ÖLÇEĞİNE uygun, orantılı olarak küçültülmüş bir gölge seti kullanıyor. */
.tile-mini {
  width: 14px; height: 23px;
  font-size: 10px;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -3px 3px rgba(120,95,40,0.18),
    inset 1px 0 0 rgba(255,255,255,0.4),
    inset -1px 0 0 rgba(120,95,40,0.1),
    0 1px 0 rgba(191,176,138,0.85),
    0 1px 1px rgba(0,0,0,0.2),
    0 2px 3px rgba(0,0,0,0.35);
  text-shadow:
    0 -0.6px 0.3px rgba(0,0,0,0.55),
    0 0.6px 0.3px rgba(255,255,255,0.8);
}
/* Masaüstünde (mobil dışında) sütunlara ayrılan melds taşları biraz daha büyük ve
   okunaklı görünsün — mobil (≤480px) bu kuraldan etkilenmez, aynı kalır. */
@media (min-width: 481px) {
  .tile-mini {
    width: 18px; height: 30px;
    font-size: 12px;
  }
}

/* ---------------- Aksiyon çubuğu ---------------- */
.action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.action-hint {
  color: #d6e6d9;
  font-size: 13px;
  font-style: italic;
}

/* ---------------- Bildirimler (modern, yığılabilir) ---------------- */
.toast-stack {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: min(420px, 92vw);
}
.toast-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(30,45,36,0.96), rgba(14,26,19,0.96));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  color: #eaf4ec;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-16px) scale(0.96);
  transition: opacity 0.28s cubic-bezier(.2,.9,.3,1.2), transform 0.28s cubic-bezier(.2,.9,.3,1.2);
  overflow: hidden;
  position: relative;
}
.toast-card.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-card.hide { opacity: 0; transform: translateY(-10px) scale(0.97); }
.toast-card .toast-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(255,255,255,0.12);
}
.toast-card .toast-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255,255,255,0.35);
  animation: toast-shrink 2.6s linear forwards;
}
@keyframes toast-shrink { from { width: 100%; } to { width: 0%; } }

.toast-card.info { border-color: rgba(212,165,55,0.4); }
.toast-card.info .toast-icon { background: rgba(212,165,55,0.22); color: #ffd76a; }
.toast-card.info .toast-bar { background: #d4a537; }

.toast-card.success { border-color: rgba(80,200,130,0.45); }
.toast-card.success .toast-icon { background: rgba(80,200,130,0.22); color: #6fe08c; }
.toast-card.success .toast-bar { background: #4fd583; }

.toast-card.error { background: linear-gradient(160deg, rgba(70,20,16,0.96), rgba(40,10,8,0.96)); border-color: rgba(220,80,70,0.5); }
.toast-card.error .toast-icon { background: rgba(220,80,70,0.25); color: #ff9086; }
.toast-card.error .toast-bar { background: #e2564a; }

.toast-card.penalty { background: linear-gradient(160deg, rgba(90,25,20,0.97), rgba(50,12,10,0.97)); border-color: rgba(255,100,60,0.6); animation: toast-shake 0.4s ease; }
.toast-card.penalty .toast-icon { background: rgba(255,120,60,0.28); color: #ffb066; }
.toast-card.penalty .toast-bar { background: #ff7a3d; }
@keyframes toast-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* ---------------- Kimlik doğrulama sekmeleri (login.php) ---------------- */
.auth-tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.auth-tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: #f0f2f0;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ok-muted, #6b7d74);
}
.auth-tab.active { background: var(--ok-green, #0b6e4f); color: #fff; }
.auth-form { display: none; flex-direction: column; gap: 14px; }
.auth-form.active { display: flex; }
.auth-form .form-field input { padding: 11px 13px; border: 1.5px solid var(--ok-border, #e3e8e4); border-radius: 9px; font-size: 14.5px; }

.auth-hero-badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ahb {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(212,165,55,0.14);
  border: 1px solid rgba(212,165,55,0.35);
  color: #eecf7e;
}
.auth-field label { display: block; margin-bottom: 5px; font-weight: 700; font-size: 12.5px; }
.auth-field input {
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--ok-green, #0b6e4f);
  box-shadow: 0 0 0 3px rgba(11,110,79,0.12);
}
.auth-submit { width: 100%; margin-top: 6px; padding: 13px 0; font-size: 15px; }
.auth-welcome-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--ok-muted, #6b7d74);
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--ok-border, #e3e8e4);
}
.auth-forgot-link { text-align: center; margin: 2px 0 0; }
.auth-forgot-link a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ok-muted, #6b7d74);
  text-decoration: none;
}
.auth-forgot-link a:hover { color: var(--ok-green, #0b6e4f); text-decoration: underline; }

.field-hint {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ok-muted, #6b7d74);
}
.dob-row, .phone-row {
  display: flex;
  gap: 8px;
}
.dob-row select {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.phone-row select {
  flex: 0 0 auto;
  max-width: 42%;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.phone-row input {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dob-row select:focus, .phone-row select:focus, .phone-row input:focus {
  outline: none;
  border-color: var(--ok-green, #0b6e4f);
  box-shadow: 0 0 0 3px rgba(11,110,79,0.12);
}
@media (max-width: 420px) {
  .phone-row { flex-wrap: wrap; }
  .phone-row select { max-width: 100%; flex: 1 1 100%; }
  .phone-row input { flex: 1 1 100%; }
}

/* KULLANICI İSTEĞİ ("çok basit görünüyor, modernleştir"): üye ol formundaki kullanıcı adı/ad-soyad
   ve şifre/şifre-tekrar çiftleri artık .form-grid ile yan yana — form daha kompakt ve modern
   görünüyor. .form-grid zaten install.css'te 640px altında tek sütuna düşüyor, mobilde bozulmaz. */
.auth-form .auth-form-grid {
  gap: 14px 16px;
  margin: 0;
}
.auth-form .auth-form-grid .form-field { margin: 0; }

/* KULLANICI İSTEĞİ ("kullanım koşulları linkini modernleştir, tüm formu modernleştir"): tik +
   link artık düz bir HTML checkbox/mavi link değil, kartımsı, hafif vurgulu bir kutu içinde;
   tik işaretli/işaretsizken ve hata durumunda görsel geri bildirim var. */
.auth-terms-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(11, 110, 79, 0.05);
  border: 1.5px solid rgba(11, 110, 79, 0.18);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 2px 0 0;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.auth-terms-box:hover {
  border-color: rgba(11, 110, 79, 0.35);
  background: rgba(11, 110, 79, 0.08);
}
.auth-terms-box input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 1px 0 0;
  accent-color: var(--ok-green, #0b6e4f);
  cursor: pointer;
}
.auth-terms-icon {
  font-size: 16px;
  line-height: 1.5;
  flex-shrink: 0;
}
.auth-terms-text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ok-ink, #1c2b24);
}
.auth-terms-link {
  color: var(--ok-green, #0b6e4f);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(11, 110, 79, 0.35);
  text-underline-offset: 2px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.auth-terms-link:hover {
  color: var(--ok-gold, #d4a537);
  text-decoration-color: currentColor;
}
.auth-terms-box.auth-terms-error {
  border-color: var(--ok-red, #c0392b);
  background: rgba(192, 57, 43, 0.07);
  animation: authTermsShake 0.35s;
}
@keyframes authTermsShake {
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* KULLANICI İSTEĞİ ("giriş formunu da modernleştir, beni hatırla tiki koy"): "Beni Hatırla" +
   "Şifremi unuttum?" artık tek satırda, aralarında boşlukla — eskiden alt alta iki ayrı öğeydi. */
.auth-remember-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 2px;
}
.auth-remember-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ok-ink, #1c2b24);
  cursor: pointer;
  user-select: none;
}
.auth-remember-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--ok-green, #0b6e4f);
  cursor: pointer;
}
.auth-forgot-link-inline {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ok-muted, #6b7d74);
  text-decoration: none;
}
.auth-forgot-link-inline:hover { color: var(--ok-green, #0b6e4f); text-decoration: underline; }

.maintenance-login-banner {
  max-width: 460px;
  margin: 0 auto 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(220,80,70,0.18), rgba(220,80,70,0.08));
  border: 1px solid rgba(220,80,70,0.45);
  color: #ffb8ae;
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
}

/* ---------------- Lobi ---------------- */
.lobby-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.lobby-actions { display: flex; gap: 10px; margin-bottom: 24px; }

/* MODERN GÖRÜNÜM: lobideki "101" rozeti ve üst bardaki/aksiyon satırındaki tüm butonlar (Yeni
   Masa Kur, Yenile, Para Çek, Admin Paneli, Çıkış Yap) daha yumuşak köşeler ve daha akıcı bir
   geçiş (transition) alır. Fare ile üzerine gelindiğinde (SADECE gerçek fare/imleçli masaüstü
   cihazlarda — dokunmatik telefon/tabletlerde "yapışkan hover" sorunu yaşanmasın diye
   `hover: hover` ve `pointer: fine` ile sınırlandırıldı) hafifçe yukarı kalkıp kendi renginde
   yumuşak bir "parlama" (glow) efekti gösterir. */
.lobby-topbar .brand-tile,
.lobby-topbar .btn,
.lobby-actions .btn {
  border-radius: 12px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background-color 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .lobby-topbar .brand-tile:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 6px 16px rgba(0,0,0,0.35), inset 0 0 0 3px rgba(255,255,255,0.4), 0 0 18px 3px rgba(212,165,55,0.55);
  }
  .lobby-topbar .btn:hover,
  .lobby-actions .btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
  }
  .lobby-topbar .btn-primary:hover,
  .lobby-actions .btn-primary:hover {
    box-shadow: 0 8px 20px rgba(11,110,79,0.45), 0 0 16px 2px rgba(11,110,79,0.5);
  }
  .lobby-topbar .btn-outline:hover,
  .lobby-actions .btn-outline:hover {
    box-shadow: 0 8px 18px rgba(0,0,0,0.12), 0 0 14px 2px rgba(212,165,55,0.45);
  }
  .lobby-topbar .btn-ghost:hover {
    box-shadow: 0 0 14px 2px rgba(255,255,255,0.25);
  }
}

/* ---------------- ADIM 70/N — Akıllı öneri kartı (D) + telefonda alt çubuk (F) + canlı sayaç ----------------
   KULLANICI İSTEĞİ: "ikisini kullan, yenileyi kaldır, canlı yap". Bkz. pages/lobby.php (.quick-bar,
   #quickSeatDock) ve assets/js/lobby.js (renderQuickSeat). */
.quick-bar { display: flex; gap: 12px; align-items: stretch; margin-bottom: 22px; }
.qs-card {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 14px 14px 20px;
  border-radius: 20px;
  background: linear-gradient(120deg, #0e7a57 0%, #0a4f39 60%, #123d2e 100%);
  color: #fff;
  position: relative; overflow: hidden;
  box-shadow: 0 12px 28px rgba(11,110,79,0.32);
}
/* üzerinden yavaşça geçen hafif parlama */
.qs-card::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.13), transparent);
  animation: qsShine 5.5s ease-in-out infinite; pointer-events: none;
}
@keyframes qsShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .qs-card::after { animation: none; display: none; } }
.qs-card.is-empty { background: linear-gradient(120deg, #3c5a4d 0%, #25382f 100%); }
.qs-card.is-loading .qs-go { opacity: 0.6; pointer-events: none; }
.qs-info { min-width: 0; flex: 1; }
.qs-tag {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: #9ff0c8;
}
.qs-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 4px rgba(46,204,113,0.3); flex-shrink: 0; }
.qs-card.is-empty .qs-tag { color: #d9e6df; }
.qs-card.is-empty .qs-tag::before { background: #d4a537; box-shadow: 0 0 0 4px rgba(212,165,55,0.3); }
.qs-title { font-size: 19px; font-weight: 800; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-meta { font-size: 13px; opacity: 0.85; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-stack { display: flex; padding-left: 11px; flex-shrink: 0; }
.qs-av {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  border: 2.5px solid #0c6347; margin-left: -11px; background: #e4ece6; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.qs-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qs-av .masa-seat-fallback { width: 62%; height: 62%; }
.qs-av-empty {
  background: rgba(255,255,255,0.14); border: 2px dashed rgba(255,255,255,0.7);
  color: #fff; font-weight: 800; font-size: 17px;
  animation: masaSeatPulse 1.6s ease-in-out infinite;
}
.qs-go {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  background: #fff; color: var(--ok-green, #0b6e4f);
  border: none; border-radius: 14px; padding: 13px 22px;
  font-weight: 800; font-size: 16px; cursor: pointer; position: relative; z-index: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  transition: transform 0.15s, box-shadow 0.15s;
}
.qs-go svg { width: 18px; height: 18px; }
.qs-go:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.25); }
.qs-go.is-joining { opacity: 0.6; cursor: wait; }
.qs-create {
  flex-shrink: 0; width: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 20px; border: 2px dashed rgba(11,110,79,0.4); background: #fff;
  color: var(--ok-green, #0b6e4f); font-weight: 800; font-size: 13px; cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.qs-create svg { width: 26px; height: 26px; }
.qs-create:hover { transform: translateY(-2px); border-color: var(--ok-green, #0b6e4f); box-shadow: 0 8px 18px rgba(11,110,79,0.18); }

.tables-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  border-bottom: 1px solid var(--ok-border, rgba(0,0,0,0.08)); padding-bottom: 8px; margin-bottom: 14px;
}
/* çizgi artık başlık+sayaç satırının tamamının altında — başlık ve "Canlı" aynı hizada */
.tables-head .form-section-title { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; }
.tables-head-icon { width: 17px; height: 17px; }
.live-pill {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; color: var(--ok-green, #0b6e4f);
  background: rgba(11,110,79,0.09); padding: 5px 12px; border-radius: 999px;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; animation: liveBlink 1.8s ease-in-out infinite; }
/* ADIM 75/N — canlı oyuncu sayısı değişince kısa nabız */
.live-count { display: inline-block; }
.live-count.live-bump { animation: liveBump 0.7s ease-out; }
@keyframes liveBump {
  0% { transform: scale(1); color: inherit; }
  35% { transform: scale(1.18); color: #12a86b; }
  100% { transform: scale(1); color: inherit; }
}
@media (prefers-reduced-motion: reduce) { .live-count.live-bump { animation: none; } }
@keyframes liveBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0.55); }
  60% { box-shadow: 0 0 0 7px rgba(46,204,113,0); }
}

/* ---------------- ADIM 72/N — filtre sekmeleri + yüksek masa altın çerçevesi ---------------- */
.table-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 14px; }
.tf-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(11,110,79,0.22); background: #fff;
  color: var(--ok-ink, #1c2b24); font-weight: 700; font-size: 13px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tf-tab:hover:not(:disabled) { border-color: var(--ok-green, #0b6e4f); }
.tf-tab.active { background: var(--ok-green, #0b6e4f); border-color: var(--ok-green, #0b6e4f); color: #fff; }
.tf-tab:disabled { opacity: 0.45; cursor: default; }
.tf-count {
  min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center;
  font-size: 11.5px; background: rgba(11,110,79,0.1); color: var(--ok-green, #0b6e4f);
}
.tf-tab.active .tf-count { background: rgba(255,255,255,0.22); color: #fff; }
@media (max-width: 480px) { .tf-tab { padding: 6px 11px; font-size: 12px; } }

/* Yüksek giriş paralı masa: altın çerçeve + parıltı + altın masa kenarı + "Yüksek Masa" rozeti.
   Bekleyen ve oynanan masalarda aynı; kartın durumu (yeşil/kırmızı zemin) korunur. */
/* ADIM 77/N — seçiciler `.table-list` ile güçlendirildi: aynı özgüllükteki ve dosyada DAHA SONRA
   gelen `.table-row.is-playing` kuralları, oynanan yüksek masalarda çerçeveyi kırmızıya çeviriyordu. */
.table-list .table-row.is-high-stake {
  border: 2px solid #d4a537;
  box-shadow: 0 0 0 3px rgba(212,165,55,0.18), 0 6px 20px rgba(212,165,55,0.28);
}
.table-list .table-row.is-high-stake::before { height: 5px; background: linear-gradient(90deg, #b8861f, #f3d27a, #b8861f); }
.table-list .table-row.is-high-stake:hover { border-color: #c8961f; box-shadow: 0 0 0 3px rgba(212,165,55,0.3), 0 14px 28px rgba(212,165,55,0.35); }
.table-list .table-row.is-high-stake .masa-felt { border-color: #d4a537; box-shadow: inset 0 2px 8px rgba(0,0,0,0.38), 0 0 14px rgba(243,210,122,0.55); }
.tr-high-badge {
  position: absolute; top: 12px; left: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  background: linear-gradient(135deg, #f3d27a, #c8961f); color: #4a3504;
  font-size: 11px; font-weight: 800; letter-spacing: 0.2px;
  box-shadow: 0 2px 6px rgba(160,110,20,0.35);
}
.tr-high-badge svg { width: 13px; height: 13px; }
/* Telefonda kart dar — rozet üst koltuğun üstüne binmesin diye sadece küçük bir taç kalır */
@media (max-width: 480px) {
  .tr-high-badge { top: 7px; left: 6px; width: 22px; height: 22px; padding: 0; justify-content: center; }
  .tr-high-badge svg { width: 12px; height: 12px; }
  .tr-high-text { display: none; }
}

/* Telefonda alta sabit çubuk — masaüstünde gizli */
.qs-dock { display: none; }
@media (max-width: 720px) {
  .quick-bar { display: none; }
  .qs-dock {
    display: flex; align-items: center; gap: 8px;
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 900; padding: 7px; border-radius: 20px;
    background: rgba(18,30,25,0.94); box-shadow: 0 10px 26px rgba(0,0,0,0.38);
  }
  .qs-dock-go {
    flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 13px 12px; border: none; border-radius: 14px; cursor: pointer;
    background: linear-gradient(135deg, #1fb582, #0b6e4f); color: #fff; font-weight: 800; font-size: 14.5px;
  }
  .qs-dock-go svg { width: 17px; height: 17px; flex-shrink: 0; }
  .qs-dock-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qs-dock-go.is-joining { opacity: 0.6; }
  .qs-dock-plus {
    width: 48px; height: 48px; flex-shrink: 0; border: none; border-radius: 14px; cursor: pointer;
    background: rgba(255,255,255,0.12); color: #fff; display: flex; align-items: center; justify-content: center;
  }
  .qs-dock-plus svg { width: 22px; height: 22px; }
  /* çubuk son masaların üstünü kapatmasın; sohbet balonu (açıksa) çubuğun üstüne çıksın */
  body.has-qs-dock { padding-bottom: 86px; }
  body.has-qs-dock .cw-bubble-btn { bottom: 88px; }
  body.has-qs-dock .cw-panel { bottom: 156px; max-height: calc(100vh - 200px); }
}

/* Cüzdan / bakiye rozeti */
.wallet-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(160deg, rgba(212,165,55,0.16), rgba(212,165,55,0.06));
  border: 1px solid rgba(212,165,55,0.4);
  border-radius: 999px;
  padding: 6px 16px 6px 10px;
}
.wallet-badge .wb-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(160deg, #f7d364, #d4a022);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.wallet-badge .wb-value { font-weight: 800; color: #a9791a; font-size: 15px; transition: color 0.25s ease; }
.wallet-badge .wb-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: #8a7a4a; display: block; }

/* DÜZELTME (kullanıcı bildirimi): bakiye sayfa yenilenmeden canlı güncellendiğinde ("Bakiyeniz"
   rozeti — bkz. lobby.js checkActiveTable), değişikliğin fark edilmesi için rozet kısa süreliğine
   yeşile yanıp sönüyor — sessiz bir DOM güncellemesi yerine görünür bir geri bildirim. */
@keyframes ok-wb-flash {
  0%   { color: #16a34a; transform: scale(1.12); }
  100% { color: #a9791a; transform: scale(1); }
}
.wallet-badge .wb-value.wb-flash {
  animation: ok-wb-flash 900ms ease-out;
  display: inline-block;
}

.create-table-box {
  background: linear-gradient(165deg, #ffffff, #f7faf7);
  border: 1px solid var(--ok-border, #e3e8e4);
  border-radius: 16px;
  padding: 26px;
  margin-bottom: 26px;
  box-shadow: 0 10px 30px rgba(11,110,79,0.08);
}
.create-table-box .form-section-title { margin-top: 0; }

/* Seçilebilir kart grubu (oyuncu sayısı / giriş puanı) */
.pill-select-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cw-manual-stake {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--ok-border, #e3e8e4);
  text-align: left;
}
.cw-manual-stake label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ok-muted, #6b7d74);
  margin-bottom: 6px;
}
.cw-manual-stake input {
  flex: 1;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--ok-border, #e3e8e4);
  font-size: 14px;
  box-sizing: border-box;
}
.pill-select-group .pill-option {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--ok-border, #e3e8e4);
  background: #fff;
  color: var(--ok-ink, #1c2b24);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.pill-select-group .pill-option:hover { border-color: var(--ok-green, #0b6e4f); }
.pill-select-group .pill-option.active {
  background: linear-gradient(160deg, var(--ok-green, #0b6e4f), var(--ok-green-dark, #084d38));
  border-color: var(--ok-green-dark, #084d38);
  color: #fff;
  box-shadow: 0 4px 10px rgba(11,110,79,0.3);
}

/* Masa listesi: alt alta uzun satırlar yerine 4'lü görsel kart ızgarası.
   Ekran daraldıkça (tablet → mobil) sütun sayısı otomatik azalır. */
/* ADIM 65/N — KULLANICI İSTEĞİ: "bilgisayarda her sırada 4 masa vardı ... bilgisayarda her sırada
   3 masa olsun" — geniş ekranda (masaüstü) varsayılan sütun sayısı 4'ten 3'e düşürüldü; telefon
   genişliğinde (720px altı) zaten 2 sütundu, DEĞİŞMEDİ. */
.table-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 720px) { .table-list { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
/* Telefon genişliği (~360-430px CSS px) DAHİL, kartlar yine 2'li yan yana kalsın — kartlar
   biraz sıkışır ama alt alta tek sütun listeye dönmez. Sadece gerçekten çok dar ekranlarda
   (~330px altı, artık üretimde neredeyse hiç kalmayan cihazlar) tek sütuna düşer. */
/* ADIM 66/N — Masa widget'ı artık kart genişliğine göre KENDİ KENDİNE ölçekleniyor (bkz. aşağıdaki
   `.masa-widget` — container query birimleri), bu yüzden burada sabit px küçültmeleri yok; sadece
   kartın iç boşluğu ve alt kısımdaki yazı/buton boyutları küçültülüyor. */
/* (Telefon küçültmeleri, temel kurallardan SONRA gelmesi için masa kartı bölümünün sonuna taşındı.) */
@media (max-width: 330px) { .table-list { grid-template-columns: 1fr; } }

/* KART KONTRASTI: kartların içinde durduğu .wizard-card paneli neredeyse BEYAZ, yarı saydam bir
   yüzey (bkz. install.css) — kartlar da düz beyaza yakın olursa (eski hali: #fff -> #f7faf7),
   ince bir kenarlık ve gölge dışında panelden hemen hemen ayırt edilemiyorlardı ("masaların rengi
   ve arka planın rengi aynı" şikayeti). Artık her kart, durumuna göre (bekliyor=yeşil, dolu=kırmızı
   tonlu) BELİRGİN biçimde tonlanmış bir zemin, daha KOYU/DOYGUN bir kenarlık ve renkli, yumuşak bir
   "parlama" gölgesi alıyor — panelden net biçimde ayrışan, "kart gibi" duran bir görünüm. */
.table-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(165deg, #ffffff 0%, #eaf4ee 100%);
  border: 1.5px solid rgba(11,110,79,0.22);
  border-radius: 16px;
  padding: 18px 14px 16px;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(8,28,19,0.10), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.table-row::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ok-green, #0b6e4f), var(--ok-gold, #d4a537));
}
.table-row.is-playing {
  background: linear-gradient(165deg, #fff8f4 0%, #fbe6dc 100%);
  border-color: rgba(192,57,43,0.24);
}
.table-row.is-playing::before { background: linear-gradient(90deg, var(--ok-red, #c0392b), #e08b45); }
.table-row:hover {
  transform: translateY(-3px);
  border-color: rgba(11,110,79,0.4);
  box-shadow: 0 12px 26px rgba(11,110,79,0.2), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.table-row.is-playing:hover {
  border-color: rgba(192,57,43,0.4);
  box-shadow: 0 12px 26px rgba(192,57,43,0.2), 0 1px 0 rgba(255,255,255,0.8) inset;
}
/* ADIM 66/N — KULLANICI İSTEĞİ: "her masanın içinde çok gereksiz boşluklar var, onu tam dolduracak
   şekilde tasarla, örneğin bekleniyor masası". Önceden masa grafiği (118px) geniş kartın (~270px)
   ortasında küçük kalıyor, altında iki ayrı metin satırı vardı ve "Bekleniyor" kartında buton
   olmadığı için, aynı satırdaki "İzle" butonlu kartlarla eşit yüksekliğe gerilince altı BOMBOŞ
   kalıyordu. Yeni düzen:
     - `.tr-info` kartın kalan tüm yüksekliğini kaplar (flex: 1) ve masa grafiğini ortalar,
     - masa grafiği kart genişliğine göre BÜYÜR (masaüstünde 226px'e kadar),
     - durum rozeti ile "3/4 oyuncu" TEK satırda, yazılar büyütüldü,
     - EK BUTON YOK (kullanıcı düzeltmesi: "ayrı bir buton yap demedim, içindekileri büyüt") —
       boşluk, masa grafiği masaüstünde 226px'e kadar büyütülerek dolduruluyor.
   Koltuk, yazı ve konum ölçüleri `cqw` (widget genişliğinin %'si) ile verildi — böylece widget
   hangi boyutta olursa olsun oranlar korunuyor. Container query desteklemeyen eski tarayıcılar
   için her değerin önünde bir px karşılığı (yaklaşık 168-190px'lik widget'a göre) duruyor. */
.table-row { justify-content: space-between; }
.tr-info {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6px 0 2px;
}
.masa-widget {
  position: relative;
  width: 226px;
  height: 226px;
  max-width: 100%;
  margin: 0 auto;
  flex-shrink: 0;
  container-type: inline-size;
}
@supports (width: 1cqw) {
  .masa-widget { width: min(226px, 94%); height: auto; aspect-ratio: 1 / 1; }
}
.masa-felt {
  position: absolute;
  inset: 25px;
  inset: 15cqw;
  border-radius: 50%;
  background: radial-gradient(ellipse at 38% 32%, #1f7a4f, #0a3f29);
  border: 5px solid #8a5a2b;
  border-width: 3cqw;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.38), 0 4px 10px rgba(0,0,0,0.2);
}
.table-row.is-playing .masa-felt {
  border-color: #8a5a2b; /* masanın kendi "ahşap" rengi durumdan bağımsız kalır */
  background: radial-gradient(ellipse at 38% 32%, #2b6b52, #0a3f29);
}
/* ADIM 64/N — masa numarası, el sayısı ve giriş parası koltukların TAM ORTASINDA (bkz. lobby.js
   masaWidgetHtml()). `pointer-events: none` — hiçbir tıklamayı ENGELLEMEZ. */
.masa-center-info {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  pointer-events: none;
  width: 84px;
  width: 50cqw;
}
/* ADIM 90/N — KULLANICI İSTEĞİ: "masa numarası lobide masa kartlarında çok büyük, küçült" — 8.5cqw → 6.6cqw
   (bilgi satırlarıyla hemen hemen aynı; 4 kişilik masada yandaki koltuklara taşmıyor). */
.masa-center-number { font-size: 11px; font-size: 6.6cqw; font-weight: 800; letter-spacing: 0.3px; opacity: 0.95; }
.masa-center-meta {
  font-size: 11px; font-size: 6.4cqw;
  font-weight: 700; color: rgba(255,255,255,0.92); white-space: nowrap;
}
.masa-center-meta.stake { color: #ffd76a; }
.masa-seat {
  position: absolute;
  width: 42px; height: 42px;
  width: 25cqw; height: 25cqw;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  border: 2px solid #fff;
  overflow: hidden;
}
.masa-seat img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.masa-seat-fallback { width: 62%; height: 62%; color: #93a79c; }
.masa-seat.filled { background: #e4ece6; }
/* ADIM 61/N + 64/N — boş koltuk ("OTUR") dolu koltuklardan belirgin şekilde BÜYÜK, parlak yeşil,
   kalın beyaz halkalı ve nabız gibi atan bir dikkat halkasıyla gösteriliyor. */
.masa-seat.empty {
  width: 56px; height: 56px;
  width: 33cqw; height: 33cqw;
  background: linear-gradient(160deg, #4fd48a, #0b6e4f);
  color: #fff;
  font-weight: 800;
  font-size: 12px; font-size: 7.2cqw;
  letter-spacing: 0.3px;
  cursor: pointer;
  border-width: 3px;
  z-index: 2;
  animation: masaSeatPulse 1.6s ease-in-out infinite;
  transition: transform 0.12s, box-shadow 0.12s;
}
@keyframes masaSeatPulse {
  0%   { box-shadow: 0 2px 5px rgba(0,0,0,0.28), 0 0 0 0 rgba(63,174,114,0.55); }
  70%  { box-shadow: 0 2px 5px rgba(0,0,0,0.28), 0 0 0 10px rgba(63,174,114,0); }
  100% { box-shadow: 0 2px 5px rgba(0,0,0,0.28), 0 0 0 0 rgba(63,174,114,0); }
}
.masa-seat.empty:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(11,110,79,0.45);
  animation-play-state: paused;
}
.masa-seat.empty.is-joining { opacity: 0.6; cursor: wait; pointer-events: none; animation: none; }
.masa-seat.empty-static {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
  font-weight: 800;
  font-size: 18px; font-size: 10cqw;
}
.masa-seat.pos-n { top: 0; left: 50%; transform: translateX(-50%); }
.masa-seat.pos-s { bottom: 0; left: 50%; transform: translateX(-50%); }
.masa-seat.pos-w { left: 0; top: 50%; transform: translateY(-50%); }
.masa-seat.pos-e { right: 0; top: 50%; transform: translateY(-50%); }
.masa-seat.pos-sw { bottom: 7px; left: 7px; bottom: 4cqw; left: 4cqw; }
.masa-seat.pos-se { bottom: 7px; right: 7px; bottom: 4cqw; right: 4cqw; }
.masa-seat.empty:hover.pos-n { transform: translateX(-50%) scale(1.1); }
.masa-seat.empty:hover.pos-s { transform: translateX(-50%) scale(1.1); }
.masa-seat.empty:hover.pos-w { transform: translateY(-50%) scale(1.1); }
.masa-seat.empty:hover.pos-e { transform: translateY(-50%) scale(1.1); }
.tr-icon-count {
  position: absolute;
  top: 4px; right: -4px;
  z-index: 3;
  min-width: 34px;
  height: 25px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ok-gold, #d4a537);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.tr-text { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.tr-name { font-weight: 800; font-size: 14.5px; color: var(--ok-ink, #1c2b24); line-height: 1.25; }
.tr-meta { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; color: var(--ok-muted, #6b7d74); flex-wrap: wrap; }
.tr-count { font-weight: 600; }
.tr-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
/* ADIM 66/N — durum noktası CSS ile çiziliyor (🟢/🔴 emojisi Windows 8'de "▯" kutu çıkıyordu). */
.tr-badge.waiting::before,
.tr-badge.playing::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.tr-badge.stake { background: rgba(212,165,55,0.15); color: #a9791a; }
.tr-badge.waiting { background: rgba(11,110,79,0.12); color: var(--ok-green, #0b6e4f); }
.tr-badge.playing { background: rgba(192,57,43,0.12); color: var(--ok-red, #c0392b); }
.tr-footer { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-top: 8px; }
.tr-actions { display: flex; gap: 8px; width: 100%; }
.tr-actions .btn { flex: 1; padding: 9px 6px; font-size: 13px; white-space: nowrap; }
.tr-actions .btn-watch { border-color: #d4a537; color: #b8891f; }
/* Telefon genişliği — bu blok BİLEREK temel kart kurallarından SONRA duruyor; önce dursaydı
   aynı özgüllükteki temel kurallar onu ezerdi (rozetler telefonda kartın kenarına taşıyordu). */
@media (max-width: 480px) {
  .table-row { padding: 12px 6px 10px; border-radius: 13px; }
  .tr-info { padding: 2px 0 0; }
  .masa-widget { width: 128px; height: 128px; }
  .tr-icon-count { top: -2px; right: -3px; height: 17px; min-width: 24px; padding: 0 5px; font-size: 10px; }
  .tr-name { font-size: 12.5px; }
  .tr-meta { font-size: 11px; gap: 4px; }
  .tr-badge { font-size: 10.5px; padding: 2px 7px; gap: 4px; }
  .tr-badge.waiting::before, .tr-badge.playing::before { width: 6px; height: 6px; }
  .tr-footer { gap: 7px; margin-top: 6px; }
  .tr-actions .btn { font-size: 11px; padding: 7px 3px; }
}
@supports (width: 1cqw) {
  @media (max-width: 480px) { .masa-widget { width: min(146px, 100%); height: auto; } }
}
.table-list-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ok-muted, #6b7d74);
  font-size: 14px;
}
.table-list-empty .tle-icon { font-size: 36px; margin-bottom: 8px; display: block; }

/* ---------------- Puan Geçmişi Modalı ---------------- */
.history-modal { width: min(420px, 100%); text-align: left; }
.history-modal .ok-modal-icon,
.history-modal .ok-modal-title { text-align: center; }
.history-list {
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f5f8f5;
  border: 1px solid var(--ok-border, #e3e8e4);
}
.history-item-left { display: flex; flex-direction: column; gap: 2px; }
.history-item-reason { font-weight: 700; font-size: 13px; color: var(--ok-ink, #1c2b24); }
.history-item-meta { font-size: 11px; color: var(--ok-muted, #6b7d74); }
/* ADIM 68/N — yönetici açıklamaları artık başlık olarak gösterildiğinden (uzun olabilir, 2 satıra
   kayabilir) metin SOLA yaslanır. `.ok-modal` (modal.css, game.css'ten SONRA yüklenir) metni
   ortaladığından, onu ezmek için seçici bilerek daha özgül yazıldı. */
.history-list .history-item-left { text-align: left; align-items: flex-start; min-width: 0; flex: 1; }
.history-list .history-item-reason { overflow-wrap: anywhere; line-height: 1.3; }
.history-list .history-item-amount { flex-shrink: 0; margin-left: 10px; }
.history-item-amount { font-weight: 800; font-size: 14px; white-space: nowrap; }
.history-item-amount.pos { color: #0b6e4f; }
.history-item-amount.neg { color: #c0392b; }
.history-empty { text-align: center; padding: 24px; color: var(--ok-muted, #6b7d74); font-size: 13px; }

.topup-request-box {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(212,165,55,0.14), rgba(212,165,55,0.05));
  border: 1px solid rgba(212,165,55,0.4);
  color: #8a6d1a;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}

/* ---------------- Masa Oluşturma Mini Sihirbazı (her soru ayrı küçük ekranda) ---------------- */
.create-wizard {
  position: relative;
  width: min(360px, 100%);
}
.cw-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 18px;
}
.cw-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok-border, #e3e8e4);
  transition: all 0.2s;
}
.cw-dot.active { background: var(--ok-green, #0b6e4f); width: 22px; border-radius: 4px; }
.cw-dot.done { background: var(--ok-gold, #d4a537); }

.cw-step { display: none; animation: cwFadeIn 0.25s ease; }
.cw-step.active { display: block; }
@keyframes cwFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.cw-pills { justify-content: center; }
.cw-pills .pill-option { padding: 12px 20px; font-size: 14px; }

.cw-back {
  display: block;
  margin: 18px auto 0;
  background: none;
  border: none;
  color: var(--ok-muted, #6b7d74);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
}
.cw-back:hover { color: var(--ok-ink, #1c2b24); }

.cw-name-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--ok-border, #e3e8e4);
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;
}

.cw-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ok-border, #e3e8e4);
  background: #fff;
  color: var(--ok-muted, #6b7d74);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.cw-close:hover { color: var(--ok-red, #c0392b); }

/* ---------------- Masa bekleme odası ---------------- */
.table-info-bar {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.tib-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(11,110,79,0.1);
  color: var(--ok-green, #0b6e4f);
}
.tib-badge.stake { background: rgba(212,165,55,0.15); color: #a9791a; }
.tib-badge.code { background: #eef1ee; color: var(--ok-muted, #6b7d74); font-family: monospace; letter-spacing: 0.5px; }

.seat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.seat-box {
  position: relative;
  background: linear-gradient(165deg, #ffffff, #f7faf7);
  border: 1.5px solid var(--ok-border, #e3e8e4);
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  transition: all 0.2s;
}
.seat-box.filled { box-shadow: 0 6px 16px rgba(11,110,79,0.08); }
.seat-box.empty { opacity: 0.55; border-style: dashed; background: transparent; box-shadow: none; }
.seat-box.is-me { border-color: var(--ok-green, #0b6e4f); box-shadow: 0 0 0 3px rgba(11,110,79,0.12); }

.seat-avatar {
  width: 46px; height: 46px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--ok-green, #0b6e4f), var(--ok-green-dark, #084d38));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 17px;
  box-shadow: 0 4px 10px rgba(11,110,79,0.25);
}
.seat-box.empty .seat-avatar {
  background: #eef1ee;
  color: var(--ok-muted, #6b7d74);
  box-shadow: none;
  font-size: 20px;
}
.seat-name { font-weight: 800; font-size: 14px; color: var(--ok-ink, #1c2b24); margin-bottom: 6px; }
.seat-box.empty .seat-name { color: var(--ok-muted, #6b7d74); font-weight: 600; }
.seat-status {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: #6b7d74;
  background: #eef1ee;
  padding: 4px 10px;
  border-radius: 999px;
}
.seat-status.ready { color: #0b6e4f; background: #d9f2e4; }
.seat-you-tag {
  position: absolute;
  top: -8px; right: -8px;
  background: var(--ok-gold, #d4a537);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);
}

.wait-hint-box {
  text-align: center;
  padding: 16px;
  border-radius: 12px;
  background: #f5f8f5;
  border: 1px solid var(--ok-border, #e3e8e4);
  color: var(--ok-muted, #6b7d74);
  font-size: 13px;
  margin-top: 4px;
}
.wait-hint-box.auto-start {
  background: linear-gradient(160deg, rgba(212,165,55,0.14), rgba(212,165,55,0.05));
  border-color: rgba(212,165,55,0.4);
  color: #a9791a;
  font-weight: 800;
}

/* ÖZELLİK BAYRAĞI: scale() mimarisinde taşlar zaten TEK bir kanvas ölçek faktörüyle küçülüp
   büyüdüğü için bu blok normalde gerekmez — kasıtlı olarak asla eşleşmeyecek bir değere
   (max-width: 0px) çekildi. Kod tamamen korunuyor, tekrar açmak için "0px" yerine "720px" yazmak
   yeterli. */
@media (max-width: 0px) {
  .tile { width: 30px; height: 46px; font-size: 13.5px; }
  .istaka-slot { width: 32px; height: 50px; }
  .dz-tile-holder { width: 38px; height: 54px; }
  .istaka-line { gap: 4px; }
  .opp-left { left: 4px; }
  .opp-right { right: 4px; }
  .table-center { padding-top: 84px; }
  /* DOKUNMA HEDEFİ: aksiyon butonları (Seri/Çift Aç/Diz) taşların aksine 15'li bir sıraya
     sığmak zorunda değil — bu yüzden mobilde Apple/Google'ın önerdiği ~44px asgari dokunma
     yüksekliğine daha yakın olacak şekilde büyütülebilirler, yanlışlıkla yan butona basmayı
     azaltır. */
  .btn-meld, .btn-sort-series {
    padding: 11px 16px;
    font-size: 13px;
  }
  .meld-buttons { gap: 10px; }
}

/* Telefonlar: DAHA ÖNCE burada .istaka-slot/.tile/.dz-tile-holder için AYRI, daha küçük piksel
   boyutları tanımlıydı (örn. istaka-slot 21x38 ama .tile hâlâ büyük boy kalıyordu). Bu proje
   TEK bir kilitli ölçek mimarisi kullanıyor (bkz. #gameCanvas + applyGameCanvasScale): TÜM
   tahta 1488x660 sabit tasarım uzayında çizilip TEK bir JS ölçek faktörüyle küçültülüyor —
   yani dar ekranlarda zaten otomatik küçülüyor. Buradaki EK, ayrı piksel geçersiz kılmaları
   gereksizdi ve özellikle "zorla yatay mod" (CSS rotate) ile birlikte devrede olduğunda
   .istaka-slot küçülüp .tile aynı büyüklükte kalarak TAŞLARIN GÖZLERDEN TAŞIP BİRBİRİNE
   BİNMESİNE yol açıyordu (kullanıcı bildirimi: dikey tutunca iç içe geçiyor). Bu yüzden taş/göz
   boyutu geçersiz kılmaları KALDIRILDI — boyutlandırmayı artık TEK BAŞINA kanvas ölçeği yapıyor. */
@media (max-width: 480px) {
  .istaka { padding: 6px 6px; border-width: 3px; border-color: #8a5a30; box-shadow: 0 -6px 18px rgba(0,0,0,0.6), inset 0 2px 8px rgba(255,255,255,0.12); }
  .istaka-row { padding: 2px 2px 0; gap: 1.5px; min-height: 40px; }
  .istaka-row.istaka-top { padding-bottom: 1px; }
  .istaka-row.istaka-bottom { padding-top: 1px; }
  .tile.fake-okey::after { font-size: 10px; }
  .tile.selected {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 0 0 2px #d4a537, 0 6px 14px rgba(0,0,0,0.6);
  }
  .istaka-line { gap: 4px; }
  .side-drop-zone { gap: 3px; }
  .dz-label { font-size: 9px; }
  /* Masaüstünde 92px'e çıkan yuvarlak butonlar, dar telefon ekranında (kanvas zaten TEK ölçek
     faktörüyle küçüldüğü için) 62px'e ayarlandı — ikon+isim etiketi hâlâ okunaklı kalıyor. */
  .btn-round-sort { width: 48px; height: 48px; }
  .btn-round-sort .brs-label { font-size: 7.5px; }
  /* Çift Diz/Seri Diz (kare, ikonlu) dar ekranda biraz küçülür ama kare kalır. */
  .btn-sort-square .brs-icon-tile { height: 19px; padding: 0 3px; }
  .btn-sort-square .brs-digit { font-size: 9px; }
  .btn-sort-square .brs-label { font-size: 7.5px; }
  /* .btn-open-tile (Seri Aç/Çift Aç) dikdörtgen/hap formunu dar ekranda da korur — sadece
     boyutları biraz küçülür, yuvarlak butonların 48x48 kuralına dönmez. */
  .btn-open-tile { height: 30px; min-width: 90px; gap: 5px; padding: 2px 10px 2px 4px; border-radius: 11px; }
  .btn-open-tile .brs-label { font-size: 9.5px; }
  .brs-icon-tile { height: 21px; padding: 0 3px; }
  .brs-digit { font-size: 9.5px; }
  .opp-tile-back { width: 8px; height: 12px; }
  .opp-name { font-size: 12px; padding: 4px 9px; }
}

/* ---------------- Yatay mod (telefon yan çevrildiğinde) ----------------
   Yükseklik çok kısıtlı olduğunda (örn. 500px altı), açtığımız per/grup/çift
   taşları görünmez olmasın diye genel çerçeveyi (buton/ıstaka/boşluk) sıkıştırıp
   Seri/Çift Açma Alanı'na mümkün olduğunca fazla dikey alan bırakılır. */
@media (max-height: 0px) and (orientation: landscape) {
  /* ÖZELLİK BAYRAĞI: scale() mimarisinde TEK kanvas ölçek faktörü zaten dikey sıkışmayı
     otomatik çözdüğü için bu blok kasıtlı olarak asla eşleşmeyecek bir değere (max-height: 0px)
     çekildi. Kod tamamen korunuyor, tekrar açmak için "0px" yerine "500px" yazmak yeterli. */
  .opp-top { top: 2px; }
  .table-center { padding-top: 50px; gap: 4px; }
  .opp-discard-holder { width: 26px; height: 36px; margin-right: 4px; }
  .opp-name { font-size: 10px; padding: 2px 7px; }
  .opp-status { font-size: 8px; }
  .turn-box { font-size: 10.5px; }
  .turn-countdown { font-size: 9.5px; padding: 1px 6px; }
  .btn-leave-table { font-size: 12px; padding: 6px 13px; }
  .meld-zone { padding: 4px 6px; }
  .center-info { gap: 6px; }
  .ib-tile, .pb-stack { width: 34px !important; height: 46px !important; transform: none !important; }
  .ib-tile .tile, .pb-stack-tile {
    box-sizing: border-box !important;
    width: 28px !important;
    height: 46px !important;
    border-width: 1px !important;
  }
  .ib-tile .tile { font-size: 13px !important; }
  .pb-count { width: 28px !important; }

  .my-zone { padding: 3px 0 4px; gap: 3px; }
  .meld-buttons { gap: 5px; }
  .btn-meld { padding: 4px 10px; font-size: 10.5px; }

  .istaka { padding: 4px 5px; }
  .istaka-row { min-height: 34px; gap: 1.5px; }
  .istaka-slot { width: 22px; height: 34px; }
  .tile { width: 20px; height: 32px; font-size: 10.5px; }
  .dz-tile-holder { width: 30px; height: 40px; }
  .dz-label { font-size: 8px; }
}

/* ====================================================================
   TELEFONDA ZORLA YATAY GÖRÜNÜM
   Cihaz dikey tutulsa bile (fiziksel döndürme izni gerektirmeden), oyun
   ekranını CSS ile 90° döndürüp yatay bir deneyim sunar — Okey gibi geniş
   bir masa gerektiren oyunlar için profesyonel, yaygın kullanılan bir
   tekniktir. Sadece TELEFON boyutundaki ekranlarda (≤900px) ve cihaz
   gerçekten dikey tutulduğunda devreye girer; tablet/masaüstünde dokunmaz.
   ==================================================================== */
/* ====================================================================
   TELEFONDA YATAY MODA YÖNLENDİRME
   Okey gibi geniş bir masa gerektiren oyunlarda, cihaz dikey tutulduğunda
   deneyim kısıtlı kalır. CSS ile "sahte" döndürme yerine (mevcut vh/vw
   tabanlı düzenle çakışıp güvenilmez sonuç verdiği için TEST EDİLİP
   TERK EDİLDİ), kullanıcıyı NET bir şekilde cihazı çevirmeye yönlendiren
   tam ekran bir uyarı gösterilir — gerçek prodüksiyon HTML5 oyunlarında
   standart olan, güvenilir yaklaşım budur.
   ==================================================================== */
.rotate-device-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(circle at 50% 40%, #0f5c3c 0%, #0a3f29 55%, #052318 100%);
  color: #eaf4ec;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
}
.rotate-device-overlay .rotate-icon {
  font-size: 64px;
  animation: rotate-hint 1.6s ease-in-out infinite;
  margin-bottom: 18px;
}
.rotate-device-overlay h2 {
  margin: 0 0 8px;
  font-size: 20px;
  color: #d4a537;
}
.rotate-device-overlay p {
  margin: 0;
  font-size: 14px;
  color: #c9d9cc;
  max-width: 280px;
  line-height: 1.5;
}
@keyframes rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}
/* ZORLA YATAY MOD YENİDEN AÇILDI (kullanıcı isteği: "sürekli yan görünsün"). Önceki bozukluğun
   ASIL SEBEBİ bulundu: yukarıdaki .table-center GERÇEK viewport birimleri (vw/vh) kullanıyordu;
   bu, kanvasın TEK ölçek faktörlü mimarisiyle çakışıyor ve döndürülmüş modda eksenler karışınca
   taşların iç içe binmesine yol açıyordu. .table-center artık SABİT piksel (820px) olduğu için
   aşağıdaki eksen-telafi kuralına ARTIK GEREK YOK (kaldırıldı) — tüm alan tek ölçek faktörüyle
   tutarlı şekilde küçülüp büyüyor, döndürülse de döndürülmese de. */
@media screen and (max-width: 900px) and (orientation: portrait) {
  /* ZORLA YATAY MOD: telefonun ekran döndürme kilidi kapalı olsa bile (yaygın bir durum —
     birçok kullanıcı oyun oynarken yanlışlıkla döndürmemek için bunu kilitli tutar), oyun ekranı
     CSS ile 90 derece döndürülüp dikey görünüme sığdırılır. Kullanıcı telefonunu fiziksel olarak
     SAAT YÖNÜNDE çevirdiğinde (sağ kenar aşağı), içerik TAM VE DOĞRU YÖNDE görünür — bu matematik
     gerçek render + fiziksel döndürme simülasyonuyla doğrulanmıştır. Dokunma/tıklama olayları
     tarayıcının GÖRSEL (render edilmiş) konumuna göre çalıştığı için sorunsuz işlemeye devam eder. */
  .rotate-device-overlay { display: none !important; }
  /* ÖNEMLİ: bu overflow:hidden kuralı SADECE oyun sayfasına (body.game-body) uygulanır — html/body
     genelinde DEĞİL. game.css admin paneli gibi başka sayfalarda da (taş görselleri için) yüklü
     olduğundan, kapsamsız bir kural oradaki normal sayfa kaydırmasını da yanlışlıkla engellerdi. */
  body.game-body { overflow: hidden; }
  .game-body {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .game-table {
    width: 100vh;
    width: 100dvh;
    height: 100vw;
    flex-shrink: 0;
    transform: rotate(90deg);
    overflow-y: auto;
  }
  .game-table .meld-zones,
  .game-table .series-zone,
  .game-table .pair-zone {
    min-height: 0;
    min-width: 0;
  }
  /* Tam ekran butonu — döndürülmüş içeriğin (kullanıcının fiziksel olarak döndürdüğü telefondan
     bakınca) SAĞ ÜST köşesinde görünmesi için, .game-table'ın kendi (döndürülmemiş) koordinat
     sistemine göre konumlandırılır. z-index yüksektir, her zaman tıklanabilir kalır. */
  .btn-fullscreen-toggle {
    display: flex;
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 99999;
  }

  /* iOS Safari'de "position:fixed" bazı eski sürümlerde, döndürülmüş (transform uygulanmış) bir
     üst elemanı doğru kapsayıcı olarak TANIMAMA gibi bilinen bir tutarsızlığa sahiptir — bu da
     bildirim kutularının .game-table içine taşınmasına rağmen yine de yanlış yönde/konumda
     görünmesine yol açabilir. "absolute" konumlandırma bu durumda çok daha güvenilir şekilde
     transform uygulanmış üst elemana göre hesaplanır — bu yüzden mobilde fixed yerine kullanılır. */
  #toastStack, #fatalErrorBanner {
    position: absolute !important;
  }
}
.btn-fullscreen-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(10,25,17,0.75);
  color: #eecf7e;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.1s, background 0.1s;
}
.btn-fullscreen-toggle:active { background: rgba(10,25,17,0.95); transform: scale(0.88); }

/* ---------------- Modern Onay Penceresi (window.confirm yerine) ---------------- */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(4,12,8,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.confirm-modal-overlay.show { display: flex; opacity: 1; }
.confirm-modal {
  width: min(380px, 100%);
  background: linear-gradient(165deg, rgba(30,48,38,0.98), rgba(12,24,18,0.98));
  border: 1px solid rgba(212,165,55,0.35);
  border-radius: 18px;
  padding: 26px 24px 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
  text-align: center;
  transform: translateY(14px) scale(0.96);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(.2,.9,.3,1.3), opacity 0.25s ease;
}
.confirm-modal-overlay.show .confirm-modal { transform: translateY(0) scale(1); opacity: 1; }
.confirm-modal-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(220,80,70,0.18);
  border: 1px solid rgba(220,80,70,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.confirm-modal-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 800;
  color: #ffb066;
}
.confirm-modal-msg {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #dbe8dd;
  white-space: pre-line;
}
.confirm-modal-buttons {
  display: flex;
  gap: 10px;
}
.confirm-modal-btn {
  flex: 1;
  padding: 11px 0;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: transform 0.1s, filter 0.1s;
}
.confirm-modal-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.confirm-modal-btn:active { filter: brightness(0.9); transform: translateY(0) scale(0.95); }
.confirm-modal-cancel {
  background: rgba(255,255,255,0.1);
  color: #eaf4ec;
  border: 1px solid rgba(255,255,255,0.2);
}
.confirm-modal-ok {
  background: linear-gradient(160deg, #c0392b, #8c2a20);
  color: #fff;
  box-shadow: 0 4px 12px rgba(192,57,43,0.4);
}


/* ADIM 81/N: dökülen para (Para Çek) ve dökülen okey taşı (masa açılınca) efektleri kaldırıldı. */

/* ---------------- Site İmzası (footer) ----------------
   Admin panelindeki "✍️ Web İmzalama" sekmesinden girilen metin, her sayfanın en altına bu
   sınıfla basılır (bkz. includes/footer.php). Sade, dikkat dağıtmayan, küçük ve ortalı bir metin
   — sayfanın normal akışına eklenir (fixed/absolute DEĞİL), böylece oyun ekranındaki hiçbir
   katmanla (z-index) çakışmaz. */
.ok-site-footer {
  display: block;
  text-align: center;
  padding: 16px 20px 20px;
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(244,241,232,0.55);
  max-width: 700px;
  margin: 0 auto;
}

/* =====================================================================================
   ADIM 73/N — OYUN MASASINDA BEKLEME MODU (pages/game.php?table_id=…, assets/js/table-wait.js)
   KULLANICI İSTEĞİ: "üyeler doğrudan oyun masasına otursun". Oyun başlamadan önce AYNI oyun
   masası gösterilir; oyuna ait kontroller gizlenir, koltuklar dolarken masanın ortasında durum
   paneli durur. Tüm ölçüler 1488x660 tasarım kanvası içinde (kanvasla birlikte ölçeklenir).
   ===================================================================================== */
body.is-waiting #openBtnStack,
body.is-waiting .center-info,
body.is-waiting .turn-box-row,
body.is-waiting .btn-sort-square,
body.is-waiting .dz-label,
body.is-waiting .dz-tile-holder,
body.is-waiting .action-bar { visibility: hidden; }
body.is-waiting .istaka { opacity: 0.55; }
/* ADIM 77/N — tam ekran düğmesinin tıklama işleyicisi game.js'te; bekleme modunda game.js yüklenmediği
   için düğme işe yaramıyordu → bekleme sırasında gizli. */
body.is-waiting .btn-fullscreen-toggle { display: none !important; }

.wait-panel {
  position: absolute;
  left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  z-index: 12;
  width: 380px;
  padding: 22px 26px 24px;
  border-radius: 28px;
  text-align: center;
  color: #eaf4ec;
  background: radial-gradient(ellipse at 50% 0%, rgba(40,120,84,0.55), rgba(8,36,25,0.88) 70%);
  border: 1px solid rgba(238,207,126,0.35);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.wp-table { font-size: 15px; font-weight: 800; letter-spacing: 0.3px; color: #ffe9a8; margin-bottom: 14px; }
.wp-ring { position: relative; width: 132px; height: 132px; margin: 0 auto 12px; }
.wp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wp-ring-bg { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 9; }
.wp-ring-fg {
  fill: none; stroke: #2ecc71; stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset 0.9s ease, stroke 0.3s;
  filter: drop-shadow(0 0 6px rgba(46,204,113,0.6));
}
.wait-panel.is-full .wp-ring-fg { stroke: #f3d27a; filter: drop-shadow(0 0 8px rgba(243,210,122,0.7)); }
.wp-count {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 900; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.wait-panel.is-full .wp-count { font-size: 48px; color: #ffe9a8; animation: wpTick 1s ease-in-out infinite; }
@keyframes wpTick { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.wp-title { font-size: 22px; font-weight: 900; }
.wp-sub { font-size: 14.5px; opacity: 0.85; margin-top: 4px; }

/* Rakip koltukları (oyundaki #oppTop/#oppLeft/#oppRight yerlerinde) */
.wait-seat { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ws-avatar {
  position: relative; width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
  background: #e4ece6; border: 4px solid #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.ws-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-fallback { width: 60%; height: 60%; color: #93a79c; }
.wait-seat.is-filled .ws-avatar { animation: wsPop 0.35s ease-out; }
@keyframes wsPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ws-avatar-empty {
  background: rgba(255,255,255,0.06); border: 3px dashed rgba(255,255,255,0.45); box-shadow: none;
  animation: wsEmptyPulse 1.8s ease-in-out infinite;
}
@keyframes wsEmptyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.18); }
  60% { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
}
.ws-dots { display: flex; gap: 6px; }
.ws-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.7); animation: wsDot 1.2s ease-in-out infinite; }
.ws-dots i:nth-child(2) { animation-delay: 0.2s; }
.ws-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes wsDot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.ws-name {
  font-size: 15px; font-weight: 800; color: #fff; padding: 4px 14px; border-radius: 999px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.18); max-width: 200px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wait-seat.is-empty .ws-name { color: rgba(255,255,255,0.7); font-weight: 700; }
.ws-ready {
  font-size: 12px; font-weight: 800; color: #0b3d2a; background: #6ee7a8;
  padding: 2px 10px; border-radius: 999px;
}
@media (prefers-reduced-motion: reduce) {
  .ws-avatar-empty, .ws-dots i, .wait-panel.is-full .wp-count, .wait-seat.is-filled .ws-avatar { animation: none; }
}

/* Kendi koltuğum — bekleme sırasında ıstaka boş olduğu için tam ıstakanın ÜSTÜNDE, ortada
   ("senin yerin burası"). Oyun başlayınca bu blok hiç yok, taşlar buraya dağıtılır. */
.wait-me {
  position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%);
  z-index: 11; display: flex; align-items: center; gap: 12px;
  padding: 8px 20px 8px 8px; border-radius: 999px;
  background: rgba(0,0,0,0.45); border: 1.5px solid rgba(238,207,126,0.6);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.wait-me .ws-avatar { width: 64px; height: 64px; border-width: 3px; }
.wait-me .ws-name { background: none; border: 0; padding: 0; font-size: 19px; }
.ws-you { font-size: 12px; font-weight: 900; color: #3a2a05; background: #f3d27a; padding: 2px 10px; border-radius: 999px; }

/* Masadan Kalk — oyundaki "Masadan Çık" ile aynı köşe, ama cezasız olduğu için yeşil/nötr */
.btn-wait-leave {
  position: absolute; bottom: 22px; right: 22px; z-index: 15;
  font-size: 15px; padding: 10px 22px;
  background: linear-gradient(160deg, rgba(26,122,82,0.9), rgba(11,42,30,0.95));
  border: 1px solid rgba(238,207,126,0.55);
}
.btn-wait-leave:disabled { opacity: 0.6; cursor: wait; }

/* ==================== ADIM 80/N — Sade üst çubuk: bakiye + Para Çek · dil · avatar menüsü ==================== */
.acct-bar { display: flex; align-items: center; gap: 10px; }
.acct-bar .wallet-badge { padding: 5px 6px 5px 8px; gap: 9px; }
.acct-bar .wb-value { color: #f3c75a; }
.acct-bar .wb-label { color: #d4a537; }
@keyframes ok-wb-flash-dark { 0% { color: #4ade80; transform: scale(1.12); } 100% { color: #f3c75a; transform: scale(1); } }
.acct-bar .wb-value.wb-flash { animation-name: ok-wb-flash-dark; }
.wallet-badge .wb-text { display: flex; flex-direction: column; line-height: 1.15; }
.wb-withdraw {
  border: none; cursor: pointer; white-space: nowrap;
  background: linear-gradient(160deg, #f0c85a, #d4a537); color: #2a1d02;
  font-weight: 900; font-size: 12.5px; border-radius: 999px; padding: 8px 14px; margin-left: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.22);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.wb-withdraw:active { transform: scale(0.94); }
.wbw-short, .wbw-icon { display: none; }
@media (hover: hover) and (pointer: fine) {
  .wb-withdraw:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(212,165,55,0.5); }
  .acct-avatar-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(212,165,55,0.35); }
}

/* Dil seçici üst çubukta/menüde (sabit köşe yerine) */
.ok-lang-switcher.in-acct {
  position: static; top: auto; right: auto; z-index: auto;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  background: rgba(0,0,0,0.18); border-color: rgba(255,255,255,0.22); padding: 3px;
}
.ok-lang-switcher.in-acct .ok-lang-opt { padding: 5px 9px; font-size: 11px; }
/* Tek dil açıksa seçici gereksiz — gizlenir (Chrome 105+ :has; desteklemeyen tarayıcıda sadece görünür kalır). */
.acct-lang:not(:has(.ok-lang-opt:nth-child(2))) { display: none; }
.acct-lang-row:not(:has(.ok-lang-opt:nth-child(2))) { display: none; }

/* Avatar düğmesi */
.acct-menu-wrap { position: relative; }
.acct-avatar-btn {
  position: relative; width: 46px; height: 46px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2.5px solid #d4a537; background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.acct-avatar-btn .profile-pill-avatar { width: 100%; height: 100%; font-size: 17px; }
.acct-avatar-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(212,165,55,0.45); }

/* Açılır menü */
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 10px); width: 244px; z-index: 900;
  background: #fff; border-radius: 14px; padding: 8px; text-align: left;
  box-shadow: 0 16px 38px rgba(0,0,0,0.28), 0 0 0 1px rgba(20,60,42,0.06);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top right;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.acct-menu.open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s; }
.acct-menu::before {
  content: ''; position: absolute; top: -6px; right: 17px; width: 12px; height: 12px;
  background: #fff; transform: rotate(45deg); border-radius: 2px;
}
.acct-menu-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; border-bottom: 1px solid #e7ece9; margin-bottom: 6px; }
.acct-menu-head b { display: block; font-size: 14px; color: #123c2b; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu-head small { color: #6a7d70; font-size: 12px; font-weight: 700; }
.acct-menu-avatar { width: 38px; height: 38px; }
.acct-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; background: none; border-radius: 9px; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 13.5px; color: #123c2b; text-decoration: none; text-align: left;
}
.acct-item:hover, .acct-item:focus-visible { background: #f1f6f3; outline: none; }
.acct-item .ai-ic { width: 20px; text-align: center; flex-shrink: 0; }
.acct-item-badge { margin-left: auto; background: #c0392b; color: #fff; font-size: 10.5px; font-weight: 900; border-radius: 999px; padding: 1px 7px; }
.acct-item-admin { color: #a67a12; }
.acct-item-logout { color: #c0392b; border-top: 1px solid #e7ece9; border-radius: 0 0 9px 9px; margin-top: 6px; padding-top: 11px; }
.acct-lang-row { cursor: default; flex-wrap: wrap; row-gap: 6px; }
.acct-lang-row:hover { background: none; }
.acct-lang-menu-slot { margin-left: auto; }
.acct-lang-menu-slot .ok-lang-switcher.in-acct { background: #0f3d28; }

/* Telefonda tek satır */
@media (max-width: 720px) {
  .lobby-topbar { flex-wrap: nowrap; gap: 8px; }
  .lobby-topbar .brand { min-width: 0; gap: 10px; }
  .lobby-topbar .brand p { display: none; }
  .lobby-topbar .brand h1 { font-size: 19px; white-space: nowrap; }
  .lobby-topbar .brand-tile { width: 40px; height: 40px; font-size: 15px; flex-shrink: 0; }
  .lobby-topbar .brand-logo { width: 40px; height: 40px; }
  .lobby-topbar .brand h1 { overflow: hidden; text-overflow: ellipsis; }
  .acct-bar { gap: 7px; flex-shrink: 0; }
  .acct-bar .wallet-badge { padding: 4px 4px 4px 5px; gap: 6px; }
  .acct-bar .wallet-badge .wb-icon { width: 24px; height: 24px; font-size: 12px; }
  .acct-bar .wb-label, .acct-bar .wb-unit { display: none; }
  .acct-bar .wb-value { font-size: 13.5px; }
  .wb-withdraw { padding: 6px 10px; font-size: 11.5px; margin-left: 0; }
  .wbw-long { display: none; }
  .wbw-short { display: inline; }
  .acct-avatar-btn { width: 40px; height: 40px; }
  .acct-lang { display: none; }
}
/* Dar telefonlar: site adı yazısı gizlenir (logo kalır), "Para Çek" sadece 💸 simgesi olur. */
@media (max-width: 360px) {
  .lobby-topbar .brand h1 { display: none; }
  .lobby-topbar { justify-content: space-between; }
  .wbw-short { display: none; }
  .wbw-icon { display: inline; font-size: 14px; }
  .wb-withdraw { padding: 5px 9px; }
}
@media (prefers-reduced-motion: reduce) { .acct-menu, .acct-menu.open { transition: none; } }

/* ==================== ADIM 82/N — Oyun masası iyileştirmeleri ==================== */

/* 1) "Açılabilir mi" göstergesi — ıstakanın üst kenarında, ortada küçük bir sekme */
.open-meter {
  position: absolute;
  left: 50%;
  top: -15px;
  transform: translateX(-50%);
  z-index: 35; /* sıra bizdeyken büyüyen Seri/Çift alanlarının (z-index:30) da üstünde kalsın */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(8,28,38,0.94), rgba(4,18,26,0.94));
  border: 1.5px solid rgba(238,207,126,0.55);
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
  color: #e8f1ec;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: auto;
  cursor: default;
  user-select: none;
}
.om-item { display: inline-flex; align-items: center; gap: 6px; }
.om-label { color: #eecf7e; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11.5px; }
.om-val { font-variant-numeric: tabular-nums; color: rgba(232,241,236,0.8); font-weight: 700; }
.om-val b { color: #fff; font-weight: 900; font-size: 14px; }
.om-bar { width: 46px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.14); overflow: hidden; }
.om-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #d4a537, #f3cf6a); transition: width 0.35s ease; }
.om-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.2); }
.om-ok { color: #4ade80; font-weight: 900; }
.om-item.done .om-val b { color: #4ade80; }
.om-item.done .om-bar i { background: linear-gradient(90deg, #22c55e, #86efac); }
.om-item.done .om-label { color: #86efac; }

/* 2) Taş işleme ipucu — seçili/sürüklenen taşın işlenebileceği açık perler */
@keyframes ok-meld-hint {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(74,222,128,0.85), 0 0 10px 2px rgba(74,222,128,0.35); }
  50%      { box-shadow: inset 0 0 0 2px rgba(74,222,128,0.5),  0 0 4px 1px rgba(74,222,128,0.15); }
}
.meld-row.can-add {
  background: rgba(74,222,128,0.14);
  animation: ok-meld-hint 1.3s ease-in-out infinite;
}

/* 3) Rakibin yeni attığı taş — birkaç saniye parlak halka */
.tile.fresh-discard {
  box-shadow: 0 0 0 3px #f3cf6a, 0 0 16px 5px rgba(243,207,106,0.75) !important;
  transition: box-shadow 0.6s ease;
}

/* 4) Ses aç/kapat düğmesi — kanvasın sol alt köşesi */
.btn-sound-toggle {
  position: absolute;
  left: 14px;
  bottom: 14px; /* sol alt köşe boş — sağ üstteki dil seçicisi/tam ekran düğmesiyle çakışmaz */
  z-index: 15;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(238,207,126,0.55);
  background: rgba(8,28,38,0.8);
  color: #eecf7e;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, background 0.12s ease;
}
.btn-sound-toggle:active { transform: scale(0.9); }
.btn-sound-toggle.muted { opacity: 0.7; border-color: rgba(255,255,255,0.25); }
@media (hover: hover) and (pointer: fine) { .btn-sound-toggle:hover { background: rgba(8,28,38,0.95); } }
body.is-waiting .btn-sound-toggle { display: none; }

/* 6) El sonu kişisel özet satırı */
.fs-my-summary {
  text-align: center;
  font-weight: 900;
  font-size: 17px;
  margin: -2px 0 10px;
  padding: 7px 12px;
  border-radius: 10px;
}
.fs-my-summary.win { color: #86efac; background: rgba(34,197,94,0.14); border: 1px solid rgba(74,222,128,0.4); }
.fs-my-summary.lose { color: #fca5a5; background: rgba(239,68,68,0.12); border: 1px solid rgba(248,113,113,0.35); }
.fs-my-summary.pending { color: #eecf7e; background: rgba(212,165,55,0.1); border: 1px solid rgba(212,165,55,0.3); font-size: 14px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .meld-row.can-add { animation: none; box-shadow: inset 0 0 0 2px rgba(74,222,128,0.8); } }

/* ==================== ADIM 83/N — havuz uyarısı, 2. elde 1. el sıralaması ==================== */
@keyframes ok-pool-critical {
  0%, 100% { box-shadow: 0 0 0 2px rgba(239,68,68,0.9), 0 0 14px 3px rgba(239,68,68,0.55); }
  50%      { box-shadow: 0 0 0 2px rgba(239,68,68,0.5), 0 0 4px 1px rgba(239,68,68,0.2); }
}
.pool-box.pool-low .pb-tile-1 { box-shadow: 0 0 0 2px #f59e0b, 0 0 12px 2px rgba(245,158,11,0.55); }
.pool-box.pool-low .pb-count { color: #b45309; }
.pool-box.pool-low .pb-label { color: #fbbf24; opacity: 1; }
.pool-box.pool-critical .pb-tile-1 { animation: ok-pool-critical 1.1s ease-in-out infinite; }
.pool-box.pool-critical .pb-count { color: #dc2626; }
.pool-box.pool-critical .pb-label { color: #f87171; opacity: 1; }

.hand1-standings { position: relative; display: flex; justify-content: center; }
.h1s-chip {
  border: 1px solid rgba(212,165,55,0.45);
  background: rgba(4,18,26,0.85);
  color: #eecf7e;
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
  cursor: pointer;
}
.h1s-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  min-width: 170px;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(8,28,38,0.97), rgba(4,18,26,0.97));
  border: 1.5px solid rgba(238,207,126,0.55);
  box-shadow: 0 10px 26px rgba(0,0,0,0.55);
  text-align: left;
}
.hand1-standings.open .h1s-panel { display: block; }
.h1s-title { font-size: 10.5px; font-weight: 900; color: #eecf7e; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; text-align: center; }
.h1s-row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #e8f1ec; }
.h1s-row.me { background: rgba(212,165,55,0.18); color: #fff; }
.h1s-rank { width: 16px; color: #eecf7e; font-weight: 900; }
.h1s-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100px; }
.h1s-score { font-variant-numeric: tabular-nums; font-weight: 900; }
@media (prefers-reduced-motion: reduce) { .pool-box.pool-critical .pb-tile-1 { animation: none; box-shadow: 0 0 0 2px #ef4444; } }
/* 1. el sıralama paneli göstergenin/havuzun ve (sıra bizdeyken büyüyen) Seri/Çift alanlarının üstünde açılsın */
.center-info { position: relative; z-index: 31; }
.hand-fee-stack { position: relative; z-index: 45; }
/* Çip orta sütunu GENİŞLETMESİN (Seri/Çift alanları daralmasın): yer kaplamadan ortalanır. */
.hand1-standings { width: 0; height: 21px; align-self: center; }
.h1s-chip { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }

/* ==================== ADIM 85/N — yeniden bağlanılıyor etiketi + renk körlüğü modu ==================== */
.reconnect-pill {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, -8px);
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(10,28,38,0.94);
  border: 1.5px solid rgba(245,158,11,0.7);
  color: #fcd34d;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.reconnect-pill.show { opacity: 1; transform: translate(-50%, 0); }
.rp-spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(252,211,77,0.3);
  border-top-color: #fcd34d;
  animation: ok-rp-spin 0.9s linear infinite;
}
@keyframes ok-rp-spin { to { transform: rotate(360deg); } }

/* Renk körlüğü düğmesi: ses düğmesinin hemen üstünde */
.btn-cb-toggle { bottom: 62px; font-size: 24px; }
.btn-cb-toggle.active { background: rgba(212,165,55,0.9); color: #14261c; border-color: #f3cf6a; }

/* Renk körlüğü modu: rakamın altındaki gri nokta yerine renge özel şekil */
body.cb-mode .tile.color-kirmizi:not(.fake-okey)::after,
body.cb-mode .tile.color-mavi:not(.fake-okey)::after,
body.cb-mode .tile.color-siyah:not(.fake-okey)::after,
body.cb-mode .tile.color-sari:not(.fake-okey)::after {
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}
body.cb-mode .tile.color-kirmizi:not(.fake-okey)::after { content: '\25B2'; } /* ▲ */
body.cb-mode .tile.color-mavi:not(.fake-okey)::after    { content: '\25A0'; } /* ■ */
body.cb-mode .tile.color-siyah:not(.fake-okey)::after   { content: '\25CF'; } /* ● */
body.cb-mode .tile.color-sari:not(.fake-okey)::after    { content: '\25C6'; } /* ◆ */
body.cb-mode .istaka .tile:not(.fake-okey)::after { font-size: 14px; bottom: 4px; width: auto; height: auto; }
body.cb-mode .tile.tile-mini:not(.fake-okey)::after { font-size: 7px; bottom: 1px; }
@media (prefers-reduced-motion: reduce) { .rp-spin { animation: none; } }

/* ==================== ADIM 86/N — Masa görseli: keçe yüzey, ahşap çerçeve, gömülü açma alanları,
   oyuncu avatarları, eğik atılan taşlar, masa rengi seçimi ==================== */
:root { --felt: #1d5a3c; --felt-dark: #103524; }
body.theme-navy  { --felt: #1c3a66; --felt-dark: #0d1d38; }
body.theme-bordo { --felt: #6a1f2b; --felt-dark: #3a0f17; }

/* Oda: masanın çevresi koyu, hafif sıcak ton */
body.game-body {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(ellipse at 50% 50%, #1a1410 0%, #0a0806 100%);
}
/* Masa: dokulu keçe + ortada hafif ışık + kenarlarda kararma + iki tonlu ahşap çerçeve */
.game-canvas {
  border-radius: 34px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.38) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(160deg, var(--felt), var(--felt-dark));
  box-shadow:
    inset 0 0 0 14px #6e4220,
    inset 0 0 0 16px #a8733c,
    inset 0 0 0 19px #3a2210,
    inset 0 10px 40px 14px rgba(0,0,0,0.45),
    0 24px 60px rgba(0,0,0,0.7);
}
/* Seri/Çift açma alanları: ızgarasız, keçeye gömülü, boşken soluk başlık */
.meld-zone {
  background: rgba(0,0,0,0.16);
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 4px 14px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(255,255,255,0.06);
  border-radius: 18px;
}
.pair-zone { position: relative; }
.meld-zone::after {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 72px; font-weight: 900; letter-spacing: 10px;
  color: rgba(255,255,255,0.05);
  pointer-events: none;
}
.series-zone::after { content: 'SERİ'; }
.pair-zone::after { content: 'ÇİFT'; font-size: 40px; letter-spacing: 4px; writing-mode: vertical-rl; }
.meld-zone .col-empty-hint { visibility: hidden; }
/* Sıra bizdeyken büyüyen alanlar opak olmalı (arkadaki rakip kutuları görünmesin) — keçenin koyu tonu */
.game-table.my-turn .series-zone,
.game-table.my-turn .pair-zone {
  background-image: none;
  background-color: var(--felt-dark);
  box-shadow: 0 12px 36px rgba(0,0,0,0.55), 0 0 0 2px rgba(212,165,55,0.55), inset 0 4px 14px rgba(0,0,0,0.45);
}
/* Oyuncu kartları: avatar + sıra kimdeyse altın halka */
.opp-name-row { background: rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.14); }
.opp-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  margin: 3px 6px 3px 4px;
  border: 2.5px solid rgba(255,255,255,0.45);
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
  background: linear-gradient(160deg, #eecf7e, #d4a537);
  color: #123c2b; font-weight: 900; font-size: 17px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.opp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opp-left .opp-avatar, .opp-right .opp-avatar { margin: 6px 3px 2px; }
.opp-name-row.is-turn .opp-avatar { border-color: #f3cf6a; box-shadow: 0 0 0 3px rgba(243,207,106,0.35), 0 0 16px 4px rgba(243,207,106,0.55); }
.opp-name.active-turn { background: transparent; color: #f3cf6a; }
/* ADIM 87/N — kullanıcı isteğiyle atılan taşlar yeniden DÜZ duruyor (eğik gösterim kaldırıldı). */
/* Masa rengi düğmesi: renk körlüğü düğmesinin üstünde */
.btn-theme-toggle { bottom: 110px; font-size: 18px; }
/* Ahşap çerçevenin (19px) içinde kalsınlar — kenar öğeleri biraz içeri alındı */
.opp-top-row { top: 22px; }
.opp-left { left: 26px; }
.opp-right { right: 26px; }
.table-fee-badge { top: 28px; left: 32px; }
.btn-sound-toggle { left: 30px; bottom: 28px; }
.btn-cb-toggle { bottom: 76px; }
.btn-theme-toggle { bottom: 124px; }
.btn-forfeit { bottom: 30px; right: 34px; }
.btn-wait-leave { bottom: 30px; right: 34px; }

/* ==================== ADIM 87/N — Düğmeler masa rengine uyar + Atılan Taş / Taş At (öneri B) ==================== */
/* Masa rengine göre arayüz tonları. Altın kenarlıklar ve özel renkli düğmeler (Geri Topla altın,
   Geri Bırak mor) bilerek sabit kalır — anlamları renkleriyle ayırt ediliyor. */
:root {
  --ui-1: #2f8a5f; --ui-2: #1d6645; --ui-3: #0e3a27; --ui-4: #072417;
  --ui-glass: rgba(7,34,22,0.92); --ui-glass-2: rgba(4,22,14,0.94); --ui-well: rgba(4,26,16,0.88);
  --accent-navy-1: #1f6645; --accent-navy-2: #0d3322;
  --table-bg-1: #1f6a47; --table-bg-2: #134631; --table-bg-3: #07241a;
  --panel-bg-1: rgba(8,40,27,0.55); --panel-bg-2: rgba(5,28,19,0.4);
}
body.theme-navy {
  --ui-1: #2f6fb3; --ui-2: #1d4d82; --ui-3: #0f2c50; --ui-4: #081a33;
  --ui-glass: rgba(8,22,46,0.92); --ui-glass-2: rgba(5,14,32,0.94); --ui-well: rgba(4,14,32,0.88);
  --accent-navy-1: #1d4d82; --accent-navy-2: #0c2445;
  --table-bg-1: #1f4f8a; --table-bg-2: #13335c; --table-bg-3: #081a33;
  --panel-bg-1: rgba(10,30,60,0.55); --panel-bg-2: rgba(6,18,40,0.4);
}
body.theme-bordo {
  --ui-1: #a33a4b; --ui-2: #7a2433; --ui-3: #47121d; --ui-4: #2a0a11;
  --ui-glass: rgba(42,10,17,0.92); --ui-glass-2: rgba(28,6,11,0.94); --ui-well: rgba(30,6,11,0.88);
  --accent-navy-1: #7a2433; --accent-navy-2: #3f0f19;
  --table-bg-1: #8a2a3a; --table-bg-2: #5a1623; --table-bg-3: #2a0a11;
  --panel-bg-1: rgba(50,12,20,0.55); --panel-bg-2: rgba(32,8,13,0.4);
}
/* Seri Aç / Çift Aç (cam düğmeler) */
.btn-open-tile:not(.btn-open-collect):not(.btn-open-return) {
  background: linear-gradient(180deg, var(--ui-1) 0%, var(--ui-2) 42%, var(--ui-3) 78%, var(--ui-4) 100%);
}
/* Yuvarlak/koyu küçük düğmeler ve paneller */
.btn-sound-toggle { background: var(--ui-glass); }
@media (hover: hover) and (pointer: fine) { .btn-sound-toggle:hover { background: var(--ui-glass-2); } }
.btn-cb-toggle.active { background: rgba(212,165,55,0.9); }
.open-meter, .h1s-panel { background: linear-gradient(180deg, var(--ui-glass), var(--ui-glass-2)); }
.h1s-chip, .reconnect-pill { background: var(--ui-glass); }
.btn-fullscreen-toggle { background: var(--ui-glass); }

/* ---- Öneri B: büyük, altın kenarlı Atılan Taş / Taş At yuvaları + ince hap Seri/Çift Diz ---- */
.side-drop-zone { gap: 8px; width: 104px; }
.side-drop-zone .dz-label { color: #eecf7e; font-size: 12px; font-weight: 900; letter-spacing: 1px; }
.side-drop-zone .dz-tile-holder {
  width: 72px; height: 96px; border-radius: 14px;
  background: radial-gradient(circle at 50% 30%, var(--ui-3), var(--ui-well));
  border: 2px solid rgba(212,165,55,0.55);
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.6), 0 0 0 4px rgba(212,165,55,0.08), 0 6px 14px rgba(0,0,0,0.4);
}
.side-drop-zone .dz-tile-holder .tile { transform: scale(1.38); }
/* Boş "Taş At" yuvasında taşın nereye atılacağını gösteren soluk ok */
.dz-discard-target .dz-tile-holder:empty::before { content: '\2193'; font-size: 30px; font-weight: 900; color: rgba(212,165,55,0.45); }
.dz-discard-target.click-armed .dz-tile-holder {
  background: radial-gradient(circle at 50% 30%, rgba(212,165,55,0.35), rgba(212,165,55,0.12));
  border-color: #f3cf6a;
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.35), 0 0 14px 3px rgba(212,165,55,0.5);
}
.btn-sort-square {
  width: 100px; height: 32px; border-radius: 999px; flex-direction: row;
  gap: 6px; padding: 0 10px; margin-top: 2px;
  background: linear-gradient(180deg, var(--ui-2), var(--ui-4));
  border: 1.5px solid rgba(212,165,55,0.6);
  box-shadow: 0 4px 10px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-sort-square .brs-icon-tile { height: 17px; padding: 0 2px; }
.btn-sort-square .brs-digit { font-size: 9px; }
.btn-sort-square .brs-label { font-size: 11.5px; color: #fde7b0; -webkit-text-stroke: 0; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .btn-sort-square:hover { border-color: rgba(243,207,106,0.95); box-shadow: 0 6px 14px rgba(0,0,0,0.5), 0 0 12px 2px rgba(212,165,55,0.35); }
}
.toast-card { background: linear-gradient(160deg, var(--ui-glass), var(--ui-glass-2)); }

/* ====================================================================
   ADIM 115/N — Okeyi serinin istenen ucuna koyma
   Sürüklerken hangi uca bırakılacağı (sol yarı = başa, sağ yarı = sona) satırın o kenarında
   parlak bir çizgiyle gösterilir; tıkla-işle akışında iki uç da uygunsa küçük bir seçim kutusu açılır.
   ==================================================================== */
.meld-row.drop-start { box-shadow: inset 4px 0 0 #ffd54a, 0 0 0 2px rgba(255,213,74,.55); }
.meld-row.drop-end   { box-shadow: inset -4px 0 0 #ffd54a, 0 0 0 2px rgba(255,213,74,.55); }
.meld-side-chooser {
  position: fixed; z-index: 10050; min-width: 210px; max-width: calc(100vw - 16px);
  background: #1d2a22; color: #fff; border: 1px solid rgba(255,213,74,.6); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5); padding: 10px 12px; text-align: center;
  animation: mscIn .14s ease-out;
}
@keyframes mscIn { from { opacity: 0; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } }
.meld-side-chooser .msc-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.meld-side-chooser .msc-btns { display: flex; gap: 8px; justify-content: center; }
.meld-side-chooser .msc-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; min-height: 44px;
  border-radius: 9px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08);
  color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; touch-action: manipulation;
}
.meld-side-chooser .msc-btn:hover, .meld-side-chooser .msc-btn:focus-visible { background: rgba(255,213,74,.22); outline: none; }
.meld-side-chooser .msc-btn.suggested { border-color: #ffd54a; background: rgba(255,213,74,.18); }
.meld-side-chooser .msc-tile { pointer-events: none; animation: none !important; }
.meld-side-chooser .msc-cancel {
  margin-top: 8px; background: none; border: 0; color: rgba(255,255,255,.7); font-size: 12px;
  text-decoration: underline; cursor: pointer; padding: 4px 8px;
}