/* Keyfi 101 — masa, oyuncu levhaları, atılan taş yığınları, banka ve istaka */

/* Istakanın ahşap damarı (bkz. .rack-kat::before). Değişkende duruyor:
   rakiplerin ıstakası ve koleksiyondaki önizleme de aynı damarı kullanır. */
:root { --ahsap-damar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='240'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.03' numOctaves='2' seed='4' result='w'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01 0.2' numOctaves='3' seed='11' result='g'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0015 0.04' numOctaves='2' seed='9' result='n'/%3E%3CfeComponentTransfer in='n' result='h'%3E%3CfeFuncR type='table' tableValues='.5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5 .65 .5 .35 .5'/%3E%3C/feComponentTransfer%3E%3CfeComposite in='g' in2='h' operator='arithmetic' k2='.7' k3='.3' k4='0' result='k'/%3E%3CfeDisplacementMap in='k' in2='w' scale='30' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='1.2 0.3'/%3E%3CfeColorMatrix values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E"); }

/* ————————————————————————————— perspektifli masa yüzeyi */

/* Masa yüzeyi ve onunla AYNI düzlemde duran katman. İkisi de aynı
   dönüşümü kullanır; böylece ikinci katmana konan gruplar gerçekten
   masanın üstüne yatırılmış gibi görünür.

   Ölçü örnekteki masanın oranlarına göre seçildi. Perspektif kutuyu
   büyüttüğü için CSS ölçüsü ekranda görünenden küçüktür: 1290 x 882'lik bu
   kutu ekranda eni tuvalin ~%71'i, boyu ~%64'ü olan bir masa veriyor ve
   dikeyde tuvalin %53.6'sına oturuyor — örnekteki oranlar bunlar.

   Ölçü tuval pikselinde sabittir ve masa ortalanır: masanın üstündeki ya da
   çevresindeki her şey (levhalar, yığınlar, istaka) de ortaya göre
   yazıldığı için pencere ne kadar genişlerse genişlesin aralarındaki oran
   bozulmaz. */
.table-3d, .table-plane {
  position: absolute;
  left: 50%; margin-left: -645px; width: 1290px;
  top: 66px; height: 882px;
  transform: perspective(1500px) rotateX(42deg);
  transform-origin: 50% 50%;
}
.table-3d { pointer-events: none; z-index: 1; }
.table-plane { z-index: 5; pointer-events: none; }
.table-plane .meld-group { pointer-events: auto; }
.table-rim {
  width: 100%; height: 100%;
  border-radius: 150px;
  padding: 14px;
  background:
    linear-gradient(158deg, #dfb968 0%, #b08c34 22%, #6d4e13 52%, #c09a44 76%, #6f5117 100%);
  box-shadow:
    0 60px 90px rgba(0, 0, 0, .65),
    inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.table-felt {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 138px;
  background:
    radial-gradient(70% 55% at 50% 42%, #33333c 0%, #23232a 45%, #16161b 78%, #0e0e12 100%);
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, .85),
    inset 0 2px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
}
/* mermer damarları */
.table-felt::before {
  content: "";
  position: absolute; inset: -20%;
  opacity: .5;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(64deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 89px),
    repeating-linear-gradient(28deg, rgba(0, 0, 0, .3) 0 3px, transparent 3px 120px);
}
.table-sheen {
  position: absolute; inset: 0;
  background: radial-gradient(45% 32% at 50% 18%, rgba(255, 255, 255, .09), transparent 70%);
}

/* ————————————————————————————— rakiplerin ıstakaları

   Masayla aynı düzlem (aynı perspektif ve eğim), içinde üç boyut korunur.
   Her ıstaka gerçek ıstaka gibi KAMA kesitli bir çubuk ve gerçekteki gibi
   masanın ORTASINA doğru yatar: sahibine bakan ön yüz (taşların dayandığı)
   ~27° geriye yatık — bu açıda bize hiç görünmez, çizilmez; masanın ortasına
   bakan arka yüz neredeyse dik (8°), tepesinde ince düz bir sırt, iki ucunda
   kesit (başlık). Sırt tabanın ortaya yakın yanında durur.

   Yerel düzende (karşıdakinin yönü) taban L × D: üst kenarı (y = 0) masanın
   dışına, alt kenarı (y = D) ortaya bakar. Ön yüz dış kenardan kalkıp tepede
   `on` kadar içeri, arka yüz alt kenardan kalkıp tepede `arka` kadar dışarı
   gelir; aradaki sırt t = D − on − arka. Arka yüzün boyu √(H² + arka²), eğimi
   atan(H / arka). Yandakiler taban ortası ekseninde döndürülür (rotateZ):
   dışları masanın kenarına, arkaları ortaya bakar.
   Masanın tam kenarına, keçenin başladığı yere oturur: oyun alanını
   daraltmaz. Takılı görünüm (ist-ejder, ist-okyanus) aynı sınıflarla gelir. */
.table-racks {
  position: absolute;
  left: 50%; margin-left: -645px; width: 1290px;
  top: 66px; height: 882px;
  transform: perspective(1500px) rotateX(42deg);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 4;
}
#board.is-waiting .table-racks { display: none; }
.rakip-istaka {
  /* Ölçüler: boy L, taban derinliği D, yükseklik H; ön yüz tepede 32,5px içeri
     (≈27°, yine bize görünmez), arka yüz 9px dışarı yatar, sırt
     51 − 32,5 − 9 = 9,5px. Arka yüzün boyu ve eğimi bunlardan: √(65² + 9²) ≈ 65,6;
     atan(65/9) ≈ 82°. Eskiden her ölçü %30 küçüktü (360 × 39 × 50); rakibin
     ıstakası uzaktan cılız görünüyordu. */
  --ri-en: 468px;
  --ri-derin: 51px;
  --ri-yuk: 65px;
  --ri-on: 32.5px;
  --ri-arka: 9px;
  --ri-yuz-boy: 65.6px;
  --ri-egim: 82.1deg;
  --ri-kenar: 20px;       /* dış kenarın masanın kenarından uzaklığı (keçenin başı) */
  --ri-ton: linear-gradient(180deg, #5c5c5c 0, #3d3d3d 4px, #2a2a2a 45%, #151515 100%);
  --ri-ust-ton: linear-gradient(90deg, #6a6a6a, #4a4a4a);
  --ri-uc-ton: linear-gradient(180deg, #333, #121212);
  --ri-desen: none;
  position: absolute;
  width: var(--ri-en); height: var(--ri-derin);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}
.rakip-istaka.is-ust { left: calc(50% - var(--ri-en) / 2); top: var(--ri-kenar); }
.rakip-istaka.is-sol {
  left: calc(var(--ri-kenar) + var(--ri-derin) / 2 - var(--ri-en) / 2);
  top: calc(50% - var(--ri-derin) / 2);
  transform: rotateZ(-90deg);
}
.rakip-istaka.is-sag {
  left: calc(100% - var(--ri-kenar) - var(--ri-derin) / 2 - var(--ri-en) / 2);
  top: calc(50% - var(--ri-derin) / 2);
  transform: rotateZ(90deg);
}
.ri-yuz, .ri-ust, .ri-uc { position: absolute; display: block; }
/* Arka yüz: tabanın ortaya bakan kenarından neredeyse dik kalkan ahşap. */
.ri-yuz {
  left: 0; width: 100%;
  top: calc(var(--ri-derin) - var(--ri-yuz-boy)); height: var(--ri-yuz-boy);
  transform-origin: 50% 100%;
  transform: rotateX(calc(-1 * var(--ri-egim)));
  border-radius: 3px 3px 1px 1px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 3px),
    var(--ri-ton);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55);
  overflow: hidden;
  isolation: isolate;
}
.ri-yuz::before, .ri-yuz::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.ri-yuz::before { background: var(--ahsap-damar) -200px -40px / 1600px 240px no-repeat; mix-blend-mode: overlay; opacity: .55; }
.ri-yuz::after { background: var(--ri-desen); opacity: var(--ri-desen-saydam, .2); }
/* Sırt: tepede, ön ve arka yüzün arasında ince düz şerit. */
.ri-ust {
  left: 0; width: 100%;
  top: var(--ri-on); height: calc(var(--ri-derin) - var(--ri-on) - var(--ri-arka));
  transform: translateZ(var(--ri-yuk));
  background: var(--ri-ust-ton);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
/* Uçlar: kesitin kendisi — geriye yatık ön, dike yakın arka, tepede sırt.
   Öğenin x'i tabanın ortaya bakan kenarından dışa doğru, y'si yukarıdan aşağı. */
.ri-uc {
  top: calc(var(--ri-derin) - var(--ri-yuk));
  width: var(--ri-derin); height: var(--ri-yuk);
  transform-origin: 0 100%;
  transform: rotateZ(-90deg) rotateX(-90deg);
  clip-path: polygon(0 100%, 100% 100%, calc(100% - var(--ri-on)) 0, var(--ri-arka) 0);
  background: var(--ri-uc-ton);
}
.ri-uc.is-sol { left: 0; }
.ri-uc.is-sag { left: 100%; }
/* Arka yüzün üst köşeleri: bitiş efekti alevleri ve arkları bu kenar boyunca
   dizer (ekrandaki yerleri ölçülür, kendileri görünmez). */
.ri-nokta { position: absolute; top: 0; width: 0; height: 0; }
.ri-nokta.is-a { left: 0; }
.ri-nokta.is-b { right: 0; }
/* Masaya düşen gölge: arka yüzün eğildiği yöne, ortaya doğru. */
.ri-golge {
  position: absolute;
  width: 506px; height: 52px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
}
.ri-golge.is-ust { left: calc(50% - 253px); top: 52px; }
.ri-golge.is-sol { left: calc(20px + 58px - 253px); top: calc(50% - 26px); transform: rotate(-90deg); }
.ri-golge.is-sag { left: calc(100% - 20px - 58px - 253px); top: calc(50% - 26px); transform: rotate(90deg); }

/* Görünümler: kendi ıstakamızdaki tonun ve desenin karşılığı. */
/* Ejder: arkada da ortada ejder madalyonu (img/istaka/ejder-madalyon-1x/2x.webp,
   yüksekliğin %93'ü), altında soluk çerçeve, kıvrımlar ve pullu dalga deseni
   (img/istaka/ejder-arka.svg, 720 × 101: arka yüzün iki katı); zemin kendi
   ıstakamızdaki lake, sırt ve uçlar altın. */
.rakip-istaka.ist-ejder {
  --ri-ton: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .35) 100%), var(--ejder-lake);
  --ri-ust-ton: linear-gradient(90deg, #8a5a12, #ffe08a 25%, #fff3c4 50%, #ffd565 75%, #8a5a12);
  --ri-uc-ton: linear-gradient(180deg, #fff0b0, #d9a23a 45%, #6e420c);
}
.rakip-istaka.ist-ejder .ri-yuz::before { opacity: .2; }
.rakip-istaka.ist-ejder .ri-yuz::after {
  background:
    url("../img/istaka/ejder-madalyon-2x.webp") 50% 50% / auto 93% no-repeat,
    url("../img/istaka/ejder-arka.svg") 0 0 / 100% 100% no-repeat;
  background-image:
    image-set(url("../img/istaka/ejder-madalyon-1x.webp") 1x, url("../img/istaka/ejder-madalyon-2x.webp") 2x),
    url("../img/istaka/ejder-arka.svg");
  opacity: 1;
}
.rakip-istaka.ist-okyanus {
  --ri-ton: linear-gradient(180deg, #6f9aac 0, #466c7c 4px, #2a4652 45%, #0f222a 100%);
  --ri-ust-ton: linear-gradient(90deg, #7eaabb, #466c7c);
  --ri-uc-ton: linear-gradient(180deg, #34596a, #0f222a);
  --ri-desen:
    var(--desen-kopuk) 0 0 / 96px 59px,
    var(--desen-dalga) 0 100% / 28px 14px;
  --ri-desen-saydam: .3;
}

/* Bu katman masanın üstünde boş bir örtüdür; tıklamayı kendi üzerine
   almamalı — altındaki masa düzleminde duran gruplara işlenebilsin diye.
   İçindeki gerçek öğeler (levhalar, yığınlar, banka) tıklamayı geri alır. */
.table-flat { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.table-flat > * { pointer-events: auto; }

/* ————————————————————————————————— oyuncu kartları */

/* Kutu yok: yuvarlak profil resmi (takılı çerçevesiyle, bkz. css/profil.css),
   altında adı, açıp açmadığı ve sıradaysa tur süresinin çubuğu. Masanın
   dışındaki koyu zeminde durdukları için yazılar gölgeli. Sıradakinin
   resminin çevresinde altın ışık atar, eli kazananınkinde yeşil. */
.seat {
  position: absolute;
  width: 192px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
/* Levhalar masanın kenarındaki rakip ıstakalarının dışında durur (referanstaki
   gibi): üstteki ıstakanın hemen üstünde, yandakiler ıstakaların yanında. */
/* Yeni elde yerler karışınca rakip levhaları yeni yerlerinde bir kez parlar
   (bkz. ui.yerlerKaristi). Konum kenar boşluğuyla verildiği için `scale`. */
.seat.is-yer-degisti { animation: yer-degisti 1.4s ease-out; }
@keyframes yer-degisti {
  0% { scale: .82; opacity: .15; }
  30% { scale: 1.07; opacity: 1; }
  100% { scale: 1; }
}
@media (prefers-reduced-motion: reduce) { .seat.is-yer-degisti { animation: none; } }
.seat-top   { left: 50%; margin-left: -96px; top: 54px; }
.seat-left  { left: 50%; margin-left: -860px; top: 425px; }
.seat-right { left: 50%; margin-left: 668px; top: 425px; }

.seat-av { position: relative; margin-bottom: 9px; border-radius: 50%; }
/* Altına sarkan çerçeve süsleri (defnenin kurdelesi, ankanın alev kuyruğu) adın üstüne binmesin. */
.seat-av:has(.cer-defne, .cer-anka) { margin-bottom: 20px; }
.seat .av { --av: 78px; }
/* Sıra ışığı çerçevenin halkasının dışında: çerçeve takılıyken de görünsün. */
.seat-av::before {
  content: "";
  position: absolute; inset: -9px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
.seat.is-turn .seat-av::before {
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(242, 208, 137, .95), 0 0 28px 8px rgba(242, 193, 78, .6);
  animation: sira-isik 1.5s ease-in-out infinite;
}
.seat.is-winner .seat-av::before {
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(96, 214, 138, .95), 0 0 28px 8px rgba(71, 193, 115, .55);
}
@keyframes sira-isik { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@media (prefers-reduced-motion: reduce) { .seat.is-turn .seat-av::before { animation: none; } }

.seat-name {
  max-width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 0;
  font-size: 16px; font-weight: 700; color: #f3eee2;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, .85);
}
.seat-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.seat-state {
  margin-top: 3px;
  font-size: 13.5px; font-weight: 600; color: var(--txt-mute);
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, .8);
}
.seat-state.opened { color: var(--green-hi); }
.seat.is-turn .seat-name { color: var(--gold-hi); }

/* düşünüyor noktaları */
.seat-think { display: inline-flex; gap: 3px; margin-left: 6px; }
.seat-think i {
  width: 4px; height: 4px; border-radius: 50%; background: var(--gold);
  animation: think 1.1s infinite ease-in-out;
}
.seat-think i:nth-child(2) { animation-delay: .18s; }
.seat-think i:nth-child(3) { animation-delay: .36s; }
@keyframes think { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* Sıradaki oyuncunun tur süresi: adının altında akan yeşil çubuk, kutusuz.
   Her kartta yeri hazır, kart büyüyüp küçülmesin; ama çubuk (koyu yolu da)
   yalnızca sıradakinde görünür. Son çeyrekte kırmızı. */
.seat-sure {
  display: block; width: 128px; height: 6px; margin: 8px auto 0;
  background: rgba(0, 0, 0, .55);
  border-radius: 999px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 1px 3px rgba(0, 0, 0, .6);
}
.seat-sure i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #1f8f4a, #3ccf6e);
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
  transition: background .3s;
}
.seat-sure.is-az i { background: linear-gradient(90deg, #b8322a, #e8685e); }
.seat-sure.is-bos { visibility: hidden; }

/* Anlık ceza (okey / işlek atmak): levhanın üstünde beliren "+101" rozeti. */
.ceza-rozeti {
  position: absolute; z-index: 60; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 16px 6px;
  color: #fff;
  background: linear-gradient(180deg, #d9493f 0%, #a52a22 100%);
  border: 1px solid #6e1c16; border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(196, 54, 46, .22), 0 10px 24px rgba(0, 0, 0, .55);
  transform: translate(-50%, -100%);
  animation: ceza-cik 3.2s ease-out forwards;
}
.ceza-rozeti b { font-size: 24px; font-weight: 900; line-height: 1; letter-spacing: .5px; }
.ceza-rozeti span { font-size: 10px; font-weight: 800; letter-spacing: 1.3px; color: #ffdcd8; }
@keyframes ceza-cik {
  0% { opacity: 0; transform: translate(-50%, -70%) scale(.6); }
  9% { opacity: 1; transform: translate(-50%, -100%) scale(1.1); }
  16% { transform: translate(-50%, -100%) scale(1); }
  82% { opacity: 1; transform: translate(-50%, -100%); }
  100% { opacity: 0; transform: translate(-50%, -130%); }
}

/* Otomatik oynayan oyuncunun etiketi. */
.seat-oto {
  margin-left: 7px; padding: 1px 6px;
  font-size: 9px; font-weight: 800; letter-spacing: 1px; vertical-align: 2px;
  color: var(--gold-hi); border: 1px solid rgba(215, 165, 63, .45); border-radius: 999px;
}

/* ————————————————————————————— açılan gruplar (masadaki) */

/* Kim açarsa açsın bütün gruplar bu tek alana iner: seriler sola, çiftler
   sağa dayalı. Konumları js/ui.js taş eni katlarıyla hesaplar; buradaki
   ölçüler oradaki MELD_* sabitleriyle aynı olmalı. */
/* Konumlar masa DÜZLEMİNİN koordinatlarıdır; ekrandaki görüntüyü perspektif
   oluşturur. Ölçüler js/meldboard.js'teki MELD_* ile aynı. Alan masayla
   birlikte genişler; eni js/ui.js tarafından ölçülüp yerleşime verilir
   (çiftler sağ kenara dayandığı için gerekli). Kenardan içeride başlar ki
   seriler masanın kıyısından değil biraz içeriden dizilsin. Boy, satırların
   ortalandığı alandır: dolu bir sütun bile istakaya değmez. */
.meld-board {
  position: absolute;
  left: 150px; right: 110px; top: 192px;
  height: 420px;
  /* Alan sığmayınca js/ui.js buraya bir scale() koyar; sol üstten küçülsün
     ki seriler sol kenarda, çiftler sağ kenarda kalsın. */
  transform-origin: 0 0;
}

.meld-group {
  position: absolute;
  display: flex; gap: 0;
}
/* Çerçeve ve zemin ölçüyü bozmasın diye ayrı katmanda durur. */
.meld-group::before {
  content: "";
  position: absolute; inset: -3px -4px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.meld-group .tile { --ts: 1; }   /* 44 / 44 — js/meldboard.js MELD_TILE_W ile aynı */
.meld-group.can-drop::before { box-shadow: inset 0 0 0 2px var(--green-hi); background: rgba(47, 158, 87, .25); }

/* İşlenebilecek yer: grubun ucunda yanıp sönen "+" kutusu. Kutu grubun
   kendi kutusunun dışına taşar; sütunlar arasında iki taşlık boşluk var,
   sığıyor. */
.meld-slot {
  position: absolute; top: 0;
  width: 44px; height: 60px;
  padding: 0;
  display: grid; place-items: center;
  border: 2px dashed var(--green-hi);
  border-radius: 6px;
  background: rgba(47, 158, 87, .22);
  color: #dcffe8;
  font-size: 30px; font-weight: 700; line-height: 1;
  animation: meld-slot-pulse 1.5s ease-in-out infinite;
}
.meld-slot.is-left { left: -46px; }
.meld-slot.is-right { right: -46px; }
.meld-slot:hover { background: rgba(71, 193, 115, .45); color: #fff; }
/* Bu turda işleme sınırı dolan uç (elde o uca uyan taş varken): yanıp
   sönmeyen, gri, kilitli kutu ve altında "2/2". Basınca neden işlenmediği
   yazar; sonraki turda kutu kalkar, uç yine "+" olur. */
.meld-slot.is-dolu {
  gap: 2px; align-content: center;
  color: #c9ccd3;
  background: rgba(10, 12, 16, .6);
  border: 2px dashed rgba(255, 255, 255, .28);
  animation: none;
  cursor: help;
}
.meld-slot.is-dolu:hover { color: #fff; background: rgba(196, 54, 46, .35); border-color: rgba(255, 140, 130, .7); }
.meld-slot.is-dolu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.meld-slot.is-dolu i { font-size: 11px; font-weight: 800; font-style: normal; letter-spacing: .5px; line-height: 1; }
/* Yalnızca saydamlık: gölge canlandırmak her karede yeniden çizim demek. */
@keyframes meld-slot-pulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

/* Okeyin yerine geçebilecek taşın olduğu grup: okey taşı parlar, tıklanınca
   okey alınır. */
.meld-group .tile.can-swap {
  cursor: pointer;
  animation: meld-swap-pulse 1.5s ease-in-out infinite;
}
/* Taşın kendi gölgesi korunur: yalnızca çevresindeki halka nefes alır.
   (Ortak nabzı kullanamıyoruz, o box-shadow'u büsbütün siliyor.) */
@keyframes meld-swap-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(242, 208, 137, .5), var(--tile-shadow); }
  50% { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 18px rgba(242, 208, 137, .75), var(--tile-shadow); }
}
.meld-group.drop-hover::before { box-shadow: inset 0 0 0 2px var(--gold-hi); background: rgba(215, 165, 63, .3); }
.meld-group.is-pair::before { box-shadow: inset 0 0 0 1px rgba(136, 120, 220, .45); }

/* ————————————————————————————— atılan taş yığınları */

/* Kutunun ölçüsü taştan türer: taş kutuyu tam doldurur, kesikli çerçeve de
   taşın hemen dışında ince bir şerit olarak görünür. Dört köşede de aynı. */
.pile {
  --pts: .95;                      /* bu yığındaki taşın ölçeği */
  position: absolute;
  width: calc(44px * var(--pts));
  height: calc(60px * var(--pts));
}
/* Örnektekiyle aynı yerleşim: yakın ikisi istakanın iki yanında, uzak ikisi
   masanın üst köşelerinde — dördü de dik durur, masaya yatmaz. Yakın ikisi
   yandaki rakip ıstakalarının alt ucuna değmesin diye biraz aşağıda. */
.pile-0 { left: 50%; margin-left: 653px; top: 712px; }
.pile-3 { left: 50%; margin-left: -697px; top: 712px; }
.pile-1 { left: 50%; margin-left: 499px; top: 242px; }
.pile-2 { left: 50%; margin-left: -543px; top: 242px; }

.pile .tile { --ts: var(--pts); position: absolute; left: 0; top: 0; z-index: 1; }
/* Uzaktakiler örnekteki gibi bir tık küçük. */
.pile-1, .pile-2 { --pts: .88; }
.pile-empty {
  position: absolute; inset: 0;
  border: 1px dashed rgba(255, 255, 255, .13);
  border-radius: 6px;
}
.pile-count {
  position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; color: var(--txt-mute);
  z-index: 1;
}
/* Taşı tuttuğun an atabileceğin yığının KENARLARI parlar: içi dolmaz, ince bir
   sarı çerçeve yanıp söner ve çevresine hafifçe yayılır. İmleç bırakma alanına
   girince yanıp sönme durur, çerçeve tam parlaklığa oturur. */
.pile.is-armed::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 9px;
  border: 2px solid rgb(255, 199, 44);
  box-shadow: 0 0 9px 1px rgba(255, 199, 44, .5), inset 0 0 7px rgba(255, 199, 44, .3);
  pointer-events: none;
  animation: pile-blink 1.1s ease-in-out infinite;
}
.pile.is-armed.is-over::after {
  border-color: rgb(255, 222, 110);
  box-shadow: 0 0 14px 2px rgba(255, 222, 110, .7), inset 0 0 10px rgba(255, 222, 110, .45);
  animation: none;
  opacity: 1;
}
/* Boş yığının kesikli çerçevesi parıltının içinde çizgi gibi durmasın. */
.pile.is-armed .pile-empty { border-color: transparent; }
@keyframes pile-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .28; }
}

/* Yerden alınan taşın boş yuvası: kesikli çerçeve, ortasında geri koy oku.
   Basınca taş yığına geri döner (örnek masadaki gibi). */
.pile-geri {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 0;
  color: rgba(255, 255, 255, .82);
  background: rgba(0, 0, 0, .28);
  border: 1.5px dashed rgba(255, 255, 255, .42);
  border-radius: 7px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.pile-geri svg { width: 46%; height: 46%; stroke-width: 2.2; }
.pile-geri:hover { color: var(--gold-hi); border-color: var(--gold-hi); background: rgba(215, 165, 63, .12); }
.pile-geri:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* Cezalı atılan (okey ya da işlek) taş yerden alınamaz: taş soluk, köşesinde
   kırmızı kilit; sıradaki oyuncunun yığınıysa üstünde ALINAMAZ yazar. */
.pile.is-yasak .tile { filter: saturate(.55) brightness(.78); }
.pile-kilit {
  position: absolute; right: -9px; top: -9px; z-index: 3;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #e55a4f, #b32a21);
  border: 2px solid #12161d;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.pile-kilit svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.4; }
.pile-yasak {
  position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 3;
  transform: translateX(-50%);
  padding: 2px 7px;
  font-size: 10px; font-weight: 900; letter-spacing: 1px; white-space: nowrap;
  color: #fff;
  background: linear-gradient(180deg, #e55a4f, #b32a21);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.pile.can-take .tile { cursor: pointer; box-shadow: 0 0 0 2px var(--green-hi), 0 0 14px rgba(71, 193, 115, .55); }
.pile .tile.landing { animation: pile-land .3s ease-out; }
@keyframes pile-land {
  from { transform: translateY(-40px) scale(1.15); opacity: .4; }
  to { transform: none; opacity: 1; }
}

/* ————————————————————————————————— banka + gösterge */

/* Örnek masadaki gibi: koyu bir panel, üstte "Banka", altında yan yana iki
   taş — soldaki kalan taş sayısı, sağdaki gösterge. Taşlar istakadakiyle
   aynı biçimde, biraz küçük. Panel dikeyde istakanın ortasına hizalı
   (istaka 700 + 184/2 = 792). */
.bank {
  position: absolute; left: 50%; margin-left: 478px; top: 734px;
  touch-action: none;             /* dokunmatikte sürükleyerek çekerken sayfa kaymasın */
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 7px 9px 9px;
  background: linear-gradient(180deg, #36383d 0%, #1f2125 42%, #151619 100%);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 16px rgba(0, 0, 0, .5);
  transition: box-shadow .15s, filter .15s, transform .1s;
}
.bank:disabled { cursor: default; }
.bank:not(:disabled) { cursor: grab; }
/* Bankadan taş sürüklenirken sayaç taşı sönükleşir: taş elde. */
.bank.is-cekiliyor .bank-sayac { opacity: .45; }
.bank:not(:disabled):hover { filter: brightness(1.08); }
.bank:not(:disabled):active { transform: translateY(1px); }
/* Sıra sende ve taş çekebiliyorsun: banka hafifçe parlayıp söner. Yerden
   taş alınca ya da bankadan çekince durur, alınan taş geri konunca yeniden
   başlar — hepsini `can-take` sınıfı belirliyor (js/ui.js renderBank). */
/* Parıltı ayrı bir katmanda, yalnızca saydamlığı canlanır: gölgeyi
   canlandırmak her karede yeniden çizim demekti (sürükleme kasıyordu). */
.bank.can-take::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 2px rgba(242, 208, 137, .9), 0 0 22px rgba(215, 165, 63, .5);
  pointer-events: none;
  animation: bank-nabiz 1.6s ease-in-out infinite;
}
@keyframes bank-nabiz {
  0%, 100% { opacity: .18; }
  50% { opacity: 1; }
}
.bank-label {
  font-size: 16px; font-weight: 800; font-style: italic; line-height: 1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.bank-taslar { display: flex; gap: 4px; }
.bank .tile { --ts: 1.04; }
/* Kalan taş sayısı: yıldızsız bir taşın ortasında, oyma rakamla. */
.bank-sayac .tile-face { justify-content: center; }
.bank-sayac .tile-num { margin-top: 0; font-size: calc(26px * var(--ts)); }

/* —————————————————————————————— görünmez atma bölgesi */

/* Sağ alt köşe: atık yığınını ve "Taş at" düğmesinin çevresini kapsar.
   Bankanın üstüne gelmez — oraya bırakılan taş atılmış sayılmamalı. */
/* Sağ alttaki geniş bırakma alanı: taşı buraya bırakınca atılır ama kendisi
   hiç görünmez. Nereye bırakacağını yığının parlaması söyler. */
.discard-zone {
  position: absolute;
  left: 50%; margin-left: 610px; right: 0;
  top: 620px; bottom: 0;
  pointer-events: none;
}

/* ————————————————————————————————— istaka bilgi kutusu */

.rack-info {
  position: absolute; left: 50%; margin-left: -580px; top: 690px;
  width: 80px; height: 96px;
  z-index: 20;
  display: grid; grid-template-rows: 1fr 1px 1fr;
  align-items: center;
  background: linear-gradient(180deg, rgba(34, 38, 47, .95), rgba(20, 23, 30, .95));
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  text-align: center;
}
.ri-sep { background: var(--panel-line); }
.ri-label { display: block; font-size: 11px; color: var(--txt-mute); letter-spacing: .4px; }
.ri-value { display: block; margin-top: 2px; font-size: 12px; color: var(--txt-mute); }
.ri-value b { font-size: 14px; color: var(--txt-dim); font-weight: 700; }
.rack-info.ready .ri-block:first-child .ri-value b { color: var(--green-hi); }
.rack-info.pairs-ready .ri-block:last-child .ri-value b { color: var(--green-hi); }

/* ————————————————————————————————————————— istaka */

/* Örnektekine yakın olsun diye istaka hem aşağı indi hem büyüdü.
   Büyütme bir ölçekle yapılıyor: göz ızgarasının piksel ölçüleri
   (48px göz, 24px yarım göz) böylece değişmeden kalıyor.

   Gerçek istaka gibi iki katlı; renk ve ölçüler örnekten ölçüldü
   (örnekteki 63px'lik taş bizde 70px: her ölçü 1,11 katı). Nötr gri, düz
   yüzeyli iki çıta ve altta ince bir taban:
     - her parçanın üstünde yumuşak, ışık alan bir pah (112 → 26),
     - çıtanın altı koyulaşarak biter; ortadaki çizgi ayrı bir ray değil,
       üst çıtanın gölgesiyle alt çıtanın pahının buluştuğu yer,
     - iki uçta aynı pahları taşıyan, yukarıdan aşağı koyulaşan başlıklar
       ve her katta bir vida.
   Ölçüler (ölçeksiz): üst çıta 0–74, alt çıta 74–147, taban 147–163.
   Üst sıra 1–71, alt sıra 77–147. */
.rack {
  position: absolute; left: 50%; margin-left: -457px; top: 698px;
  transform: scale(1.15); transform-origin: 0 0;
  width: 794px; height: 163px;
  border-radius: 5px 5px 4px 4px;
  background: #0a0a0a;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .6);
  z-index: 20;
}
/* Başlıklar: iki uçta dikey parça; pahlar çıtalarla aynı hizada, her katta vida. */
.rack::before, .rack::after,
.istaka-onizleme::before, .istaka-onizleme::after {
  content: "";
  position: absolute; top: 0; bottom: 0; z-index: 3;
  width: 13px;
  background:
    radial-gradient(circle, #d6d7d9 0 1.3px, #8c8f94 2.2px, #3a3c40 3.4px, rgba(0, 0, 0, 0) 4.2px) 50% 40px / 10px 10px no-repeat,
    radial-gradient(circle, #d6d7d9 0 1.3px, #8c8f94 2.2px, #3a3c40 3.4px, rgba(0, 0, 0, 0) 4.2px) 50% 106px / 10px 10px no-repeat,
    linear-gradient(180deg, rgb(127, 127, 127) 0, rgb(120, 120, 120) 1.1px, rgb(106, 106, 106) 2.2px, rgb(89, 89, 89) 3.3px, rgb(72, 72, 72) 4.4px, rgb(56, 56, 56) 5.5px, rgb(47, 47, 47) 6.7px, rgb(36, 36, 36) 38px, rgb(29, 29, 29) 50px, rgb(20, 20, 20) 73px, rgb(70, 70, 70) 74px, rgb(64, 64, 64) 75.1px, rgb(44, 44, 44) 76.2px, rgb(25, 25, 25) 77.3px, rgb(17, 17, 17) 78.4px, rgb(9, 9, 9) 105px, rgb(4, 4, 4) 118px, rgb(1, 1, 1) 146px, rgb(66, 66, 66) 147px, rgb(89, 89, 89) 148.1px, rgb(62, 62, 62) 149.2px, rgb(33, 33, 33) 150.3px, rgb(21, 21, 21) 151.4px, rgb(15, 15, 15) 160px, rgb(8, 8, 8) 161px, rgb(2, 2, 2) 163px);
  pointer-events: none;
}
.rack::before, .istaka-onizleme::before { left: 0; border-radius: 5px 0 0 4px; }
.rack::after, .istaka-onizleme::after { right: 0; border-radius: 0 5px 4px 0; }
/* sıra süresi çubuğu: üst çıtanın kenarında ince bir çizgi */
.rack-timer {
  position: absolute; left: 13px; right: 13px; top: 0; z-index: 4;
  height: 3px;
  border-radius: 2px;
  background: transparent;
  overflow: hidden;
}
/* Dolgu hep tam en; kalan süre `scaleX` ile gösterilir (bkz. cubukAkit):
   ekran kartında akar, sayfayı her karede yeniden çizdirmez. */
.rack-timer i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
  transition: background .3s;
}
.rack-timer.low i { background: linear-gradient(90deg, #c4362e, #e8685e); }

/* Çıtalar ve taban: düz nötr gri yüzey, üstte pah, altta koyulaşma. */
.rack-kat, .rack-taban { position: absolute; left: 0; right: 0; pointer-events: none; }
/* Akıcılık: ıstakanın zemini (ahşap damarı, görünümün deseni, ejderhalar —
   hepsi pahalı SVG süzgeçleri) ve taşlar AYRI katmanlarda. Zemin bir kez
   çizilir; sürüklerken bırakma çerçevesi ya da taşlar değişince yalnızca
   taşların katmanı yeniden çizilir. Aynı katmandayken her çerçeve kaymasında
   altındaki süzgeçler baştan hesaplanıyor, sürükleme kasıyordu. */
.rack > .rack-kat, .rack > .rack-taban, .rack > .rack-resim, .rack > .rack-body { transform: translateZ(0); }
/* Görünümün iki çıtaya birden yayılan resmi (Ejder'in madalyonu): tek parça,
   çıtaların üstünde, taşların altında. Yarı yarıya iki çıtaya çizilince
   birleşme yerinde ince bir çizgi kalıyordu. Görünüm resim vermezse yok. */
.rack-resim { position: absolute; left: 0; right: 0; top: 0; height: 147px; pointer-events: none; display: none; }
/* Hafif ahşap deseni (örnekteki gibi): kısa, ince lifler hafifçe eğilip
   dalgalanarak akar; yer yer birbirine yaklaşıp alev gibi kıvrılır. SVG
   gürültüsünden üretilir: ince lif gürültüsüne büyük, yatık halkaların
   ince çizgileri karışır, sonra hepsi yavaş değişen ikinci bir gürültüyle
   bükülür ve hafifçe yumuşatılır. Pah ve gölge çizgilerine değmesin diye
   üstten ve alttan sönerek biter; `overlay` karışımı yüzeyin tonunu korur,
   yalnızca damarları hafifçe açıp koyultur. Desen tek parça ve tekrarsız;
   kenarlarındaki bükülme artığı görünmesin diye içeriden kullanılır. */
.rack-kat { isolation: isolate; }
.rack-kat::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--ahsap-damar) -20px -30px / 1600px 240px no-repeat;
  mix-blend-mode: overlay;
  opacity: .6;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9px, #000 calc(100% - 9px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9px, #000 calc(100% - 9px), transparent 100%);
}
/* Alt çıta aynı desenin başka yeri: iki çıta birbirinin kopyası görünmesin. */
.rack-kat.is-alt::before { background-position: -800px -140px; }
.rack-kat.is-ust {
  top: 0; height: 74px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, rgb(112, 112, 112) 0, rgb(106, 106, 106) 1.1px, rgb(87, 87, 87) 2.2px, rgb(69, 69, 69) 3.3px, rgb(54, 54, 54) 4.4px, rgb(39, 39, 39) 5.5px, rgb(26, 26, 26) 6.7px, rgb(28, 28, 28) 40px, rgb(24, 24, 24) 64px, rgb(21, 21, 21) 66.5px, rgb(19, 19, 19) 67.7px, rgb(13, 13, 13) 69.9px, rgb(9, 9, 9) 72px, rgb(7, 7, 7) 74px);
}
.rack-kat.is-alt {
  top: 74px; height: 73px;
  background: linear-gradient(180deg, rgb(91, 91, 91) 0, rgb(83, 83, 83) 1.1px, rgb(58, 58, 58) 2.2px, rgb(33, 33, 33) 3.3px, rgb(24, 24, 24) 4.4px, rgb(28, 28, 28) 35px, rgb(23, 23, 23) 61px, rgb(21, 21, 21) 62.2px, rgb(18, 18, 18) 64.4px, rgb(13, 13, 13) 66.6px, rgb(11, 11, 11) 68.8px, rgb(7, 7, 7) 71px, rgb(6, 6, 6) 73px);
}
.rack-taban {
  top: 147px; height: 16px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, rgb(72, 72, 72) 0, rgb(95, 95, 95) 1.1px, rgb(68, 68, 68) 2.2px, rgb(39, 39, 39) 3.3px, rgb(26, 26, 26) 4.4px, rgb(24, 24, 24) 13.3px, rgb(12, 12, 12) 14.4px, rgb(2, 2, 2) 16px);
}

/* ————————————————————————————— ıstaka görünümleri (kozmetik)

   Ahşap aynı kalır: gölgeleme basamakları klasik ıstakanınkiyle bir, yalnızca
   tonu değişir; damar deseni (::before) üstünde durmaya devam eder. Üstüne
   ::after ile hafif bir desen biner — taşlar çıtaların yüzünü örttüğü için
   desen en çok boş gözlerde, başlıklarda ve rakiplerin ıstaka arkasında
   görünür. Sınıf ıstakanın kendisinde: .ist-ejder, .ist-okyanus
   (bkz. js/kozmetik.js). Aynı sınıflar rakiplerin ıstakasına ve
   koleksiyondaki önizlemeye de uygulanır. */
:root {
  --desen-meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9'%3E %3Cpath d='M0 8.2h13.5V.8H4.5v4.6h5V3.6' fill='none' stroke='%23f5c65e' stroke-width='1.1'/%3E%3C/svg%3E");
  /* Ejder lakesi: solda koyu kırmızı, sağa doğru açık kırmızı; iki uç
     arasındaki fark yumuşak. */
  --ejder-lake: linear-gradient(90deg, #5c1210 0%, #6c1612 30%, #841c15 60%, #9e241b 85%, #aa281d 100%);
  --desen-dalga: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E %3Cg fill='none' stroke='%23b5ecf6' stroke-width='.9'%3E %3Cpath d='M2 20a18 18 0 0 1 36 0M7 20a13 13 0 0 1 26 0M12 20a8 8 0 0 1 16 0'/%3E %3Cpath d='M-18 10a18 18 0 0 1 36 0M-13 10a13 13 0 0 1 26 0M-8 10a8 8 0 0 1 16 0'/%3E %3Cpath d='M22 10a18 18 0 0 1 36 0M27 10a13 13 0 0 1 26 0M32 10a8 8 0 0 1 16 0'/%3E %3C/g%3E%3C/svg%3E");
  --desen-kopuk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='74'%3E %3Cg fill='%23e6fbff'%3E%3Ccircle cx='14' cy='12' r='.9'/%3E%3Ccircle cx='52' cy='20' r='.7'/%3E%3Ccircle cx='88' cy='9' r='1'/%3E%3Ccircle cx='104' cy='27' r='.6'/%3E%3Ccircle cx='33' cy='31' r='.6'/%3E%3C/g%3E%3C/svg%3E");
}
.rack-kat::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 6px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 6px), transparent 100%);
}

/* Ejder: kızıl lake — solda koyu, sağa doğru açık kırmızı, fark yumuşak
   (--ejder-lake). Ortada yuvarlak ejder madalyonu (img/istaka/ejder-madalyon-1x/2x.webp,
   140 × 140, ortalı); zeminde soluk pullu dalga deseni, hafif kıvrımlı altın
   çizgiler, kenarda ince kare çerçeve ve madalyonun gölgesi
   (img/istaka/ejder-on.svg, 794 × 147: iki çıtanın tamamı). İkisi de
   .rack-resim'de tek parça; madalyon iki çıtanın arasındaki yivle bölünmez. Çıtaların
   tepesinde ince altın çizgi, uçlarda altın başlıklar, dipte altın geçme
   şeridi. Çizim betikle üretilir (bkz. README, "Ejder ıstakası"). */
/* Madalyon önceden küçültülüp keskinleştirilmiş iki kopyadan gelir: ekranın
   piksel yoğunluğuna göre 1x (192 px) ya da 2x (384 px); image-set bilmeyen
   tarayıcı ilk satırdaki 2x'i kullanır (bkz. araclar/madalyon_kes.py). */
.ist-ejder .rack-resim {
  display: block;
  background:
    url("../img/istaka/ejder-madalyon-2x.webp") 50% 50% / 140px 140px no-repeat,
    url("../img/istaka/ejder-on.svg") 0 0 / 794px 147px no-repeat;
  background-image:
    image-set(url("../img/istaka/ejder-madalyon-1x.webp") 1x, url("../img/istaka/ejder-madalyon-2x.webp") 2x),
    url("../img/istaka/ejder-on.svg");
}
.ist-ejder .rack-kat.is-ust,
.ist-ejder .rack-kat.is-alt { background: var(--ejder-lake); }
.ist-ejder .rack-kat::before { opacity: .22; }
.ist-ejder .rack-kat::after {
  background:
    linear-gradient(180deg, rgba(255, 226, 190, .3) 0, rgba(255, 226, 190, 0) 4px, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, .28) 100%),
    linear-gradient(90deg, #8a5a12, #ffe08a 25%, #fff3c4 50%, #ffd565 75%, #8a5a12) 0 0 / 100% 1.6px no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
}
.ist-ejder .rack-kat.is-alt::after {
  background:
    linear-gradient(180deg, rgba(255, 226, 190, .26) 0, rgba(255, 226, 190, 0) 4px, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, .3) 100%),
    linear-gradient(90deg, #8a5a12, #ffe08a 25%, #fff3c4 50%, #ffd565 75%, #8a5a12) 0 0 / 100% 1.6px no-repeat;
}
/* Dip: lake üstünde iki altın çizgi arasında altın geçme (meander) şeridi. */
.ist-ejder .rack-taban {
  background:
    linear-gradient(90deg, #a06a16, #ffe08a 30%, #fff1bd 50%, #ffd565 70%, #a06a16) 0 3px / 100% 1px no-repeat,
    linear-gradient(90deg, #a06a16, #ffe08a 30%, #fff1bd 50%, #ffd565 70%, #a06a16) 0 12.5px / 100% 1px no-repeat,
    var(--desen-meander) 0 4.6px / 14px 7px repeat-x,
    linear-gradient(180deg, rgba(255, 220, 190, .35) 0, rgba(0, 0, 0, 0) 2.5px, rgba(0, 0, 0, .15) 50%, rgba(0, 0, 0, .55) 100%),
    var(--ejder-lake);
}
/* Başlıklar parlak altın: yanlardan kararan silindir parıltısı; çıta
   aralarında koyu yivler, vidaların yerinde kızıl taşlı altın perçinler. */
.ist-ejder.rack::before, .ist-ejder.rack::after,
.ist-ejder.istaka-onizleme::before, .ist-ejder.istaka-onizleme::after {
  background:
    radial-gradient(circle, #ffd9c4 0 .8px, #d0301f 1.3px, #7a0f08 2.3px, #fff0b0 2.8px, #b07818 3.6px, rgba(0, 0, 0, 0) 4.2px) 50% 40px / 10px 10px no-repeat,
    radial-gradient(circle, #ffd9c4 0 .8px, #d0301f 1.3px, #7a0f08 2.3px, #fff0b0 2.8px, #b07818 3.6px, rgba(0, 0, 0, 0) 4.2px) 50% 106px / 10px 10px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 5px, rgba(0, 0, 0, 0) 55px, rgba(0, 0, 0, .3) 72px, rgba(60, 20, 0, .8) 73.5px, rgba(255, 245, 210, .6) 74.5px, rgba(255, 255, 255, 0) 78px, rgba(0, 0, 0, 0) 128px, rgba(0, 0, 0, .3) 145px, rgba(60, 20, 0, .8) 146.5px, rgba(255, 245, 210, .55) 147.5px, rgba(0, 0, 0, 0) 151px, rgba(0, 0, 0, .5) 163px),
    linear-gradient(90deg, #6e420c 0%, #d9a23a 28%, #fff1b8 50%, #e6b448 72%, #6a3f0b 100%);
}

/* Okyanus: deniz rüzgârında ağarmış mavi ahşap; dipten yükselen soluk dalgalar
   (seigaiha) ve yer yer köpük. */
.ist-okyanus .rack-kat.is-ust { background: linear-gradient(180deg, rgb(89, 129, 147) 0, rgb(84, 123, 140) 1.1px, rgb(70, 103, 118) 2.2px, rgb(57, 85, 97) 3.3px, rgb(46, 69, 80) 4.4px, rgb(35, 54, 62) 5.5px, rgb(25, 40, 47) 6.7px, rgb(27, 42, 49) 40px, rgb(24, 38, 45) 64px, rgb(22, 35, 41) 66.5px, rgb(20, 33, 39) 67.7px, rgb(16, 27, 32) 69.9px, rgb(13, 22, 27) 72px, rgb(11, 20, 25) 74px); }
.ist-okyanus .rack-kat.is-alt { background: linear-gradient(180deg, rgb(73, 108, 123) 0, rgb(67, 99, 113) 1.1px, rgb(49, 73, 84) 2.2px, rgb(30, 47, 55) 3.3px, rgb(24, 38, 45) 4.4px, rgb(27, 42, 49) 35px, rgb(23, 37, 44) 61px, rgb(22, 35, 41) 62.2px, rgb(19, 32, 38) 64.4px, rgb(16, 27, 32) 66.6px, rgb(14, 24, 30) 68.8px, rgb(11, 20, 25) 71px, rgb(10, 19, 24) 73px); }
.ist-okyanus .rack-taban { background: linear-gradient(180deg, rgb(59, 88, 101) 0, rgb(76, 112, 127) 1.1px, rgb(56, 84, 96) 2.2px, rgb(35, 54, 62) 3.3px, rgb(25, 40, 47) 4.4px, rgb(24, 38, 45) 13.3px, rgb(15, 25, 31) 14.4px, rgb(7, 15, 19) 16px); }
.ist-okyanus.rack::before, .ist-okyanus.rack::after,
.ist-okyanus.istaka-onizleme::before, .ist-okyanus.istaka-onizleme::after {
  background:
    radial-gradient(circle, #eefaff 0 1.3px, #9cc9d6 2.2px, #2f5563 3.4px, rgba(0, 0, 0, 0) 4.2px) 50% 40px / 10px 10px no-repeat,
    radial-gradient(circle, #eefaff 0 1.3px, #9cc9d6 2.2px, #2f5563 3.4px, rgba(0, 0, 0, 0) 4.2px) 50% 106px / 10px 10px no-repeat,
    linear-gradient(180deg, rgb(100, 145, 164) 0, rgb(95, 138, 156) 1.1px, rgb(84, 123, 140) 2.2px, rgb(72, 106, 120) 3.3px, rgb(59, 88, 101) 4.4px, rgb(47, 71, 82) 5.5px, rgb(41, 62, 72) 6.7px, rgb(33, 50, 59) 38px, rgb(27, 43, 51) 50px, rgb(21, 34, 40) 73px, rgb(58, 86, 98) 74px, rgb(53, 80, 91) 75.1px, rgb(39, 59, 68) 76.2px, rgb(24, 39, 46) 77.3px, rgb(19, 31, 37) 78.4px, rgb(13, 22, 27) 105px, rgb(9, 17, 22) 118px, rgb(7, 14, 18) 146px, rgb(55, 82, 94) 147px, rgb(72, 106, 120) 148.1px, rgb(52, 77, 89) 149.2px, rgb(30, 47, 55) 150.3px, rgb(22, 35, 41) 151.4px, rgb(17, 29, 34) 160px, rgb(12, 21, 26) 161px, rgb(7, 15, 19) 163px);
}
.ist-okyanus .rack-kat::after {
  background:
    var(--desen-kopuk) 0 0 / 120px 74px,
    var(--desen-dalga) 0 100% / 40px 20px;
  opacity: .22;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .25) 14px, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .25) 14px, #000 70%, transparent 100%);
}
.ist-okyanus .rack-kat.is-alt::after {
  background:
    var(--desen-kopuk) 60px 20px / 120px 74px,
    var(--desen-dalga) 20px 100% / 40px 20px;
}

/* Taş sıraları çıtaların içinde: üst sıra 1–71, alt sıra tabana oturur (77–147). */
.rack-body { position: absolute; inset: 1px 13px 0 13px; z-index: 2; }

/* Gözler yalnızca arka plan ızgarasıdır; taşlar yarım göz (24px)
   hassasiyetiyle üstlerine mutlak konumlanır. */
.rack-row {
  position: absolute; left: 0; z-index: 1;
  width: 768px; height: 70px;
}
.rack-row > .tile { position: absolute; top: 0; }
/* İki sıra ayrı çıtalarda. */
.rack-row[data-row="0"] { top: 0; }
.rack-row[data-row="1"] { top: 76px; }

/* İstakadaki taş örnekteki oranda: masadakinden uzun (48x70) ve 48px'lik
   gözü tam dolduruyor — örnekteki gibi taşlar arasında boşluk yok, onları
   yalnızca kendi koyu sağ kenarı ayırıyor. Göz ızgarası değişmediği için
   yarım göz hesabı da aynı. Sürüklerken çıkan hayalet de istakadaki taşın
   biçimini taşır. Masadaki gruplar 44x60 kalır: yerleşimleri o ölçüye göre
   hesaplanıyor (js/meldboard.js). */
.rack-row > .tile,
.drag-ghost .tile,
.bank .tile {
  width: calc(48px * var(--ts));
  height: calc(70px * var(--ts));
}
/* Bitişik taşlarda seçim halkası komşusunun altında kalmasın. */
.rack-row > .tile.is-selected { z-index: 2; }
.rack-row > .tile,
.drag-ghost .tile,
.bank .tile { border-radius: calc(8px * var(--ts)); }
/* Örnekten ölçüldü: rakam taş boyunun üçte biri, merkezi boyun %28'inde;
   çukur taş eninin yarısına yakın, merkezi boyun %75'inde; yıldız çukurun
   dörtte üçüne yakın (örnekte 15px / 21px). */
.rack-row > .tile .tile-num,
.drag-ghost .tile .tile-num,
.bank-tile .tile .tile-num { margin-top: calc(1px * var(--ts)); font-size: calc(31px * var(--ts)); }
.rack-row > .tile .tile-pip,
.drag-ghost .tile .tile-pip,
.bank-tile .tile .tile-pip {
  bottom: calc(6.5px * var(--ts));
  width: calc(22px * var(--ts)); height: calc(22px * var(--ts));
  margin-left: calc(-11px * var(--ts));
}
.rack-row > .tile .tile-pip .tile-star,
.drag-ghost .tile .tile-pip .tile-star,
.bank-tile .tile .tile-pip .tile-star { width: calc(19.5px * var(--ts)); height: calc(19.5px * var(--ts)); }

/* Taşlar gözlerin içinde değil, sonraki kardeşleri olarak üstlerinde durur;
   bu yüzden tıklamayı taş alır ve gözün ayrıca kapatılması gerekmez. */
/* Gözler görünmez: istakanın yüzeyi örnekteki gibi düz, ayraç çizgisi yok. */
.slot {
  position: absolute; top: 0;
  width: 48px; height: 70px;
}
/* Bırakınca bloğun oturacağı yer; yarım göze yuvarlanmış konumu gösterir */
.drop-preview {
  position: absolute; top: -3px; height: 76px;
  border-radius: 7px;
  background: rgba(215, 165, 63, .14);
  box-shadow: inset 0 0 0 1px rgba(215, 165, 63, .65);
  pointer-events: none;
}

/* grup altı puan şeridi: taşların alt yarısına oyulmuş hap biçimli bir oluk,
   taşların yıldızını örter. Işık sol üstten gelir: üst kenar gölgede, alt
   kenar açık, çevresinde ince parlak bir hat var. Dibi soldan sağa açılır.
   Puan (çiftte "Çift") tam ortada, ayırma çarpısı sağda. */
.group-bar {
  position: absolute;
  box-sizing: border-box;
  height: 22px; bottom: 7px;
  border: 1px solid;
  border-color: #857862 #a6977e #c9b69b #928168;
  border-radius: 11px;
  background: linear-gradient(90deg, #b3976f, #d5bf9b);
  box-shadow:
    inset 0 1px 0 rgba(60, 45, 25, .5),
    inset 1px 0 0 rgba(60, 45, 25, .12),
    0 0 0 1px rgba(255, 250, 238, .28),
    -1px 0 0 0 rgba(255, 250, 238, .18);
  color: #0b0906;
  font: 700 16px/1 "PT Sans Narrow", "Arial Narrow", sans-serif;
  pointer-events: none;
  z-index: 3;
}
.group-bar .gb-puan {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center;
}
.group-bar .gb-x {
  pointer-events: auto;
  position: absolute; right: 6px; top: 50%;
  width: 20px; height: 20px; margin-top: -10px;
  display: grid; place-items: center;
  cursor: pointer;
}
.group-bar .gb-x svg {
  width: 8.5px; height: 8px;
  fill: none; stroke: currentColor; stroke-width: 3.6;
}
.group-bar .gb-x:hover { color: var(--red); }

/* ————————————————————— kilitli gruplar (istaka) */

/* Geçerli bir grup oluştuğunda taşlar tek bir bütün gibi davranır: tek taşı
   sürüklenemez, grup bütün olarak taşınır. Grubun çevresinde bant ya da
   çerçeve yok — taşlar sıradan taşlar gibi durur; grubu altındaki puan
   şeridi belli eder, seçili grubu taşların kendi halkası gösterir. */

/* Gruptaki taş kendi başına seçilmez — grup tek parça. İmleç "tut"
   biçiminde: blok olarak sürüklenebiliyor. Grup seçiliyken de taşlar
   yerinde durur; vurgu taşların halkasından gelir. */
.tile.in-group { cursor: grab; }
.tile.in-group.is-selected { transform: none; }

/* Sürüklenen kopya: içindeki taşlar istakadaki yerleşimleriyle mutlak
   konumlandırılır, kutunun kendisi imlecin altında tuttuğun noktadan asılı durur.
   Bu yüzden ne ortalama ne de boyut tahmini yapılır. */
.drag-ghost {
  position: fixed; left: 0; top: 0;
  z-index: 200;
  width: 0; height: 0;
  pointer-events: none;
  /* Yeri, eğimi ve büyütmesi tek bir dönüşümde (js/ui.js): kopya kendi
     katmanında, ekran kartında taşınır; altındaki masa yeniden çizilmez.
     Gölge yok: taş imlecin altında yalın durur. */
  will-change: transform;
}
/* Grup sürüklenirken altındaki puan şeridi de yerinde kalmaz. */
.group-bar.is-dragging { opacity: 0; }

/* Yerden alınan taş: bu turda kullanılmazsa atılmak zorunda olan taş.
   İstakada ayırt edilsin diye ince bir uyarı çerçevesi taşır. */
.tile.must-use::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 7px;
  border: 2px solid rgba(110, 190, 255, .75);
  box-shadow: 0 0 8px rgba(110, 190, 255, .45);
  pointer-events: none;
}

/* Bir peri masaya sürüklerken grup alanı hedef olduğunu belli eder. */
.meld-board.drop-hover::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 10px;
  border: 2px solid rgba(255, 199, 44, .8);
  background: rgba(255, 199, 44, .08);
  pointer-events: none;
}

/* ————————————————————————————————— masada bekleme */

/* Masa dolana kadar oyun masası açık ama boş: boş koltukta davet kutusu,
   ortada kaç kişinin beklendiği ve davet düğmesi. */
.seat-davet {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 0;
  background: none; border: 0;
  cursor: pointer;
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, .85);
}
.seat-davet b { margin-top: 6px; font-size: 16px; font-weight: 700; color: #efeadf; }
.seat-davet span:last-child { font-size: 13.5px; font-weight: 600; color: var(--gold-hi); }
.seat-davet:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; border-radius: 12px; }
/* Boş koltuğun dairesi avatarla aynı boyda: içinde altın artı. */
.sd-arti {
  width: 78px; height: 78px;
  display: grid; place-items: center;
  font-size: 34px; font-weight: 600; line-height: 1;
  color: var(--gold-hi);
  background: rgba(20, 23, 30, .72);
  border: 2px dashed rgba(215, 165, 63, .55);
  border-radius: 50%;
  transition: transform .15s, background .15s, border-color .15s;
}
.seat-davet:hover .sd-arti { transform: scale(1.06); background: rgba(40, 35, 22, .9); border-color: var(--gold); }

/* Botu koltuktan kaldıran çarpı: yalnızca masayı açan görür. */
.seat-cikar {
  position: absolute; top: -2px; left: calc(50% + 24px);
  width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center;
  font-size: 16px; line-height: 1;
  color: var(--txt-dim);
  background: rgba(20, 22, 28, .92);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.seat-cikar:hover { color: #fff; background: var(--red); }

.bekleme {
  position: absolute; left: 50%; top: 360px;
  width: 700px; margin-left: -350px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.bekleme[hidden] { display: none; }
.bk-baslik {
  margin: 0;
  font-size: 27px; font-weight: 500; color: #efeadf;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .7);
}
.bk-baslik b { font-weight: 800; color: var(--gold-hi); }
.bk-alt { margin: 0 0 10px; font-size: 14px; color: var(--txt-dim); }
.bk-davet {
  height: 46px; padding: 0 26px;
  font-size: 15px; font-weight: 800;
  color: #241700;
  background: linear-gradient(180deg, #ffbd3a, #eb9a10);
  border-color: #b57507;
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(235, 154, 16, .3);
}
.bk-davet span { font-size: 20px; line-height: 1; }
/* Davet düğmeleri yan yana: arkadaş/bot davet et ve davet linki. */
.bk-dugmeler { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.bk-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold-hi);
  background: rgba(20, 24, 32, .82);
  border-color: rgba(215, 165, 63, .55);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}
.bk-link svg { width: 18px; height: 18px; stroke-width: 2.2; }

/* Beklerken istaka, banka ve düğmeler sönük durur: oyun başlayınca dolar. */
#board.is-waiting .rack-info,
#board.is-waiting .actions { opacity: .45; }
#board.is-waiting .bank { filter: grayscale(.85) brightness(.55); }