/* ======================================================
   Domino: King/Pis Yedili ile aynı masa (kozlu.css: koltuk, avatar, durum balonu, sonuç). Burada yalnızca Domino'ya
   özgü parçalar var: oyuncu sayısına göre koltuk yerleşimi, ortadaki zincir ve havuz, 101'deki ahşap ıstaka
   (istaka.webp) üzerinde dik duran taşlar ve vurgulanan uçlar.
   Taş görselleri yataydır ve küçük sayı soldadır (domino_a_b.png); dikey kutuda ±90° döndürülür.
   ====================================================== */
.dm-page [hidden] { display: none !important; }
.dm-page .kz-avatar { display: grid; place-items: center; }
.dm-page .kz-avatar img, .dm-page .kz-avatar-me { grid-area: 1 / 1; }

/* ---------- Koltuklar: 2 kişide karşı, 3 kişide üst-sol/üst-sağ, 4 kişide sol/üst/sağ ---------- */
.dm-table[data-players="2"] { grid-template-areas: "top top top" "center center center" "me me me"; }
.dm-table[data-players="3"] { grid-template-areas: "tl . tr" "center center center" "me me me"; }
.dm-table .kz-seat[data-pos="tl"] { grid-area: tl; }
.dm-table .kz-seat[data-pos="tr"] { grid-area: tr; }
.kz-seat.is-low .dm-count { color: #ffb4a8; }

/* Rakiplerin kapalı taşları: yalnızca arka yüz ve sayı (taşların değeri DOM'da yoktur). */
.dm-backs { display: flex; align-items: center; height: 26px; padding-left: 7px; }
.dm-back {
    display: block;
    width: 13px;
    height: 26px;
    margin-left: -7px;
    border-radius: 3px;
    background: linear-gradient(160deg, #3d2a1c, #22160e);
    border: 1px solid rgba(229, 169, 59, .55);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(0, 0, 0, .25);
}
.dm-back.is-fly { width: 100%; height: 100%; margin: 0; }

/* ---------- Orta: havuz, uçlar ve zincir ---------- */
.dm-center { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; align-self: stretch; }
.dm-info { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.dm-boneyard, .dm-ends {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(20, 11, 7, .75);
    border: 1px solid rgba(229, 169, 59, .35);
    color: var(--p-cream);
    font: 600 14px/1.2 var(--sans);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dm-boneyard { cursor: default; }
.dm-boneyard.is-ready { cursor: pointer; border-color: var(--p-mustard); box-shadow: 0 0 0 3px rgba(229, 169, 59, .35), 0 0 16px rgba(229, 169, 59, .45); }
.dm-boneyard.is-ready:hover { background: rgba(60, 36, 20, .9); }
.dm-boneyard:focus-visible { outline: 3px solid var(--p-mustard); outline-offset: 3px; }
.dm-boneyard.is-empty { color: var(--p-sage); border-style: dashed; }
.dm-boneyard.is-empty .dm-pile { opacity: .35; }
.dm-pile { position: relative; width: 22px; height: 22px; }
.dm-pile span {
    position: absolute;
    left: 4px;
    width: 11px;
    height: 20px;
    border-radius: 2px;
    background: linear-gradient(160deg, #3d2a1c, #22160e);
    border: 1px solid rgba(229, 169, 59, .6);
}
.dm-pile span:nth-child(2) { left: 7px; top: 1px; }
.dm-pile span:nth-child(3) { left: 10px; top: 2px; }
.dm-ends { border-color: var(--p-mustard); }

.dm-chain {
    position: relative;
    width: 100%;
    height: clamp(190px, 40vh, 430px);
    min-width: 0;
}
.dm-ctile, .dm-target { position: absolute; display: block; }
.dm-ctile { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.dm-ctile.is-new { animation: dm-pop .35s ease; }
@keyframes dm-pop { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Taş yüzü: kutuyu doldurur; dikeyde görsel döner. Kutular her zaman 2:1 ya da 1:2 olduğundan dikey kutuda görsel
   kutunun iki katı eninde ve yarı boyundadır; dönünce kutuyu tam kaplar. */
.dm-face { position: relative; display: block; width: 100%; height: 100%; pointer-events: none; }
.dm-face img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    max-width: none;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
    user-select: none;
}
.dm-face.is-vert img { width: 200%; height: 50%; }

/* Seçili taşın konabileceği uç: yarı saydam önizleme ve parlayan çerçeve. */
.dm-target {
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(229, 169, 59, .18);
    cursor: pointer;
    box-shadow: 0 0 0 3px var(--p-mustard), 0 0 18px rgba(229, 169, 59, .7);
    z-index: 2;
}
.dm-target .dm-face { opacity: .62; }
.dm-target:hover .dm-face, .dm-target:focus-visible .dm-face { opacity: .95; }
.dm-target:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Parmakla rahat dokunulsun: görünmeyen dokunma alanı taştan geniştir. */
.dm-target::before { content: ""; position: absolute; inset: -10px; }
@media (prefers-reduced-motion: no-preference) {
    .dm-target { animation: dm-glow 1.3s ease-in-out infinite; }
}
@keyframes dm-glow { 50% { box-shadow: 0 0 0 3px var(--p-mustard), 0 0 30px rgba(229, 169, 59, .95); } }
.dm-fly { z-index: 50; }

/* ---------- Eylemler: yalnızca o anın düğmeleri ---------- */
.dm-turnrow { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
.dm-actions { display: flex; gap: 8px; }
.dm-actions .pg-btn { min-height: 44px; }

/* ---------- Istaka (101 Okey ile aynı görsel) ----------
   istaka.webp 1800×452: üst rafın üst kenarı yüksekliğin %39,7'si, alt rafınki %83,3'ü; yan dikmeler yaklaşık
   126 piksel. Görsel üç parça çizilir (border-image): dikmeler bozulmaz, yalnızca orta kısım taş sayısına göre uzar.
   Taş eni (--tw) konteyner genişliğinden ve sütun sayısından hesaplanır; boyu enin iki katıdır. */
.dm-rack-wrap { container-type: inline-size; width: 100%; display: flex; justify-content: center; padding-top: 6px; }
.dm-rack {
    --tw: clamp(24px, calc((min(100cqw, 980px) - var(--cols) * 6px - 12px) / (var(--cols) + 3)), 36px);
    --th: calc(var(--tw) * 2);
    --rack-h: calc(var(--th) / .385);
    --post: calc(var(--rack-h) * .279);
    display: grid;
    grid-template-columns: repeat(var(--cols), calc(var(--tw) + 6px));
    grid-template-rows: calc(var(--rack-h) * .397) calc(var(--rack-h) * .436);
    align-items: end;
    justify-items: center;
    height: var(--rack-h);
    padding: 0 4px;
    border-style: solid;
    border-color: transparent;
    border-width: 0 var(--post);
    border-image: url("../img/istaka.webp") 0 126 fill / 0 var(--post) stretch;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5));
}
.dm-htile {
    position: relative;
    width: var(--tw);
    height: var(--th);
    margin-bottom: 1px;
    padding: 0;
    border: 0;
    border-radius: calc(var(--tw) * .14);
    background: none;
    cursor: pointer;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45));
    transition: transform .14s ease, filter .14s ease;
    touch-action: manipulation;
}
.dm-htile:hover:not([aria-disabled="true"]) { transform: translateY(-3px); }
.dm-htile.is-selected { transform: translateY(-9px); filter: drop-shadow(0 0 0 var(--p-mustard)) drop-shadow(0 0 3px var(--p-mustard)) drop-shadow(0 0 8px rgba(229, 169, 59, .9)); }
.dm-htile.is-drawn:not(.is-selected) { filter: drop-shadow(0 0 3px #86d7a6) drop-shadow(0 0 7px rgba(134, 215, 166, .8)); }
.dm-htile.is-illegal { filter: brightness(.55) saturate(.6); cursor: default; }
.dm-htile:focus-visible { outline: 3px solid var(--p-mustard); outline-offset: 2px; z-index: 2; }
.dm-htile.is-shake { animation: kz-shake .35s ease; }
.dm-rack.is-dealing .dm-htile { animation: dm-deal .4s cubic-bezier(.2, .7, .2, 1) both; }
.dm-rack.is-dealing .dm-htile:nth-child(2n) { animation-delay: 70ms; }
.dm-rack.is-dealing .dm-htile:nth-child(3n) { animation-delay: 140ms; }
@keyframes dm-deal { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }

/* ---------- Sonuç ---------- */
.dm-left { display: inline-flex; flex-wrap: wrap; gap: 3px; justify-content: flex-start; }
.dm-mini { display: block; width: 36px; height: 18px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }

@media (max-width: 760px) {
    .dm-chain { height: clamp(170px, 36vh, 320px); }
}
@media (max-width: 600px) {
    /* Dar ekranda yan koltuklar üst sıraya çıkar: zincir masanın bütün genişliğini kullanır. */
    .dm-table[data-players="4"] { grid-template-areas: "left top right" "center center center" "me me me"; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dm-table[data-players="3"] { grid-template-areas: "tl tr" "center center" "me me"; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dm-table[data-players="2"] { grid-template-areas: "top" "center" "me"; grid-template-columns: minmax(0, 1fr); }
    .dm-table .kz-seat-left, .dm-table .kz-seat-right { flex-direction: column; }
    /* Dört kişide üstteki koltuk da yanlardaki gibi dikey: dar sütunda ad bölünmez. */
    .dm-table[data-players="4"] .kz-seat-top { flex-direction: column; text-align: center; gap: 5px; }
    .dm-table[data-players="4"] .kz-seat-top .kz-seat-info { align-items: center; }
    .dm-table[data-players="4"] .kz-seat-stats { flex-direction: column; gap: 0; align-items: center; }
    /* Masanın ahşap çerçevesi kenardan ~11px taşar: yan boşluk ondan geniş olmalı (yatay kaydırma olmasın). */
    .dm-page .kz-main { padding-left: 12px; padding-right: 12px; }
    .dm-boneyard, .dm-ends { min-height: 30px; padding: 3px 10px; font-size: 12.5px; }
    .dm-backs { height: 20px; }
    .dm-back { width: 10px; height: 20px; margin-left: -6px; }
    .dm-target::before { inset: -14px; }
    .dm-actions .pg-btn { min-height: 44px; padding-inline: 14px; }
}