/* ======================================================
   Dokuz Taş: Tavla'nın iki kişilik düzeni (tavla.css: oyuncu şeritleri, sağ panel) ve doğal ahşap tahta
   (dokuz_tas_tahta_dogal.png, 1254×1254). Tahta her zaman karedir; noktalar points.ts'deki oransal koordinatlarda
   konumlanır. Her nokta tek düğmedir: pul, dokunma hedefi ve vurgu aynı merkezi paylaşır.
   ====================================================== */
.dt-page [hidden] { display: none !important; }
html:has(.dt-page) { scrollbar-gutter: stable; }

/* Tahta genişliği ekran yüksekliğinden de sınırlanır: iki şerit ve tahta kaydırmadan birlikte görünür. */
.dt-game { --board-max: min(calc(100dvh - 210px), 760px); padding-top: 6px; }
.dt-board-col { flex: 0 1 var(--board-max); min-width: min(100%, 300px); }
.dt-board {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: center / 100% 100% no-repeat;
    border-radius: 2.4%;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.dt-points { position: absolute; inset: 0; }

/* Nokta: dokunma alanı iç karedeki iki komşu nokta arasının ~%90'ı (tahtanın %11,5'i); pul tahtanın --piece oranı. */
.dt-pt {
    position: absolute;
    width: 11.5%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    transform: translate(-50%, -50%);
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}
.dt-pt::before {
    /* Vurgu halkası: pul ile aynı merkezde ve aynı çapta. */
    content: "";
    position: absolute;
    inset: calc((1 - var(--piece) / .115) * 50%);
    border-radius: 50%;
    pointer-events: none;
}
.dt-piece {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--piece) / .115 * 100%);
    height: auto;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .55));
    pointer-events: none;
    transition: transform .14s ease, filter .14s ease;
}
.dt-pt[aria-disabled="false"] { cursor: pointer; }
.dt-pt:focus-visible { outline: 3px solid var(--p-mustard); outline-offset: -2px; }

/* Yerleştirme ve hareket hedefi: boş noktada sarı halka ve iç nokta. */
.dt-pt.is-place::before, .dt-pt.is-target::before {
    inset: calc((1 - var(--piece) / .115 * .55) * 50%);
    background: rgba(229, 169, 59, .28);
    box-shadow: 0 0 0 2px var(--p-mustard), 0 0 12px rgba(229, 169, 59, .6);
}
.dt-pt.is-place::before { background: transparent; box-shadow: 0 0 0 2px rgba(229, 169, 59, .55); }
.dt-pt.is-place:hover::before { background: rgba(229, 169, 59, .3); box-shadow: 0 0 0 2px var(--p-mustard); }
.dt-pt.is-target::before { animation: dt-pulse 1.2s ease-in-out infinite; }
@keyframes dt-pulse { 50% { box-shadow: 0 0 0 3px var(--p-mustard), 0 0 20px rgba(229, 169, 59, .9); } }

/* Hareket ettirilebilir ve seçili taş. */
.dt-pt.is-movable .dt-piece { filter: drop-shadow(0 0 3px rgba(229, 169, 59, .9)) drop-shadow(0 3px 3px rgba(0, 0, 0, .55)); }
.dt-pt.is-selected .dt-piece { transform: translate(-50%, -50%) scale(1.1); filter: drop-shadow(0 0 0 var(--p-mustard)) drop-shadow(0 0 5px var(--p-mustard)) drop-shadow(0 8px 6px rgba(0, 0, 0, .55)); }
.dt-pt.is-selected::before { box-shadow: 0 0 0 3px var(--p-mustard); }

/* Alınabilir rakip taşı: kırmızı halka (yalnızca bunlar). */
.dt-pt.is-removable::before { box-shadow: 0 0 0 3px #e0786a, 0 0 16px rgba(224, 120, 106, .85); z-index: 1; }
.dt-pt.is-removable { cursor: pointer; }
.dt-pt.is-taken .dt-piece { opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .35s, transform .35s; }

/* Son hamle ve üçlüdeki taşlar. */
.dt-pt.is-last::before { box-shadow: 0 0 0 2px rgba(134, 215, 166, .8); }
.dt-pt.is-last.is-empty::before { box-shadow: 0 0 0 2px rgba(134, 215, 166, .45); }
.dt-pt.is-mill .dt-piece { filter: drop-shadow(0 0 4px rgba(134, 215, 166, .85)) drop-shadow(0 3px 3px rgba(0, 0, 0, .55)); }
.dt-board.is-locked .dt-pt { cursor: default; }
.dt-ghost { z-index: 50; }
.dt-ghost-img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .55)); }

/* ---------- Şeritler ve panel ---------- */
.dt-stats { color: var(--p-sage); }
.dt-stats strong { color: var(--p-mustard); font-weight: 700; }
.dt-fly { color: #9fe0b8; font-weight: 700; }
.dt-side { gap: 10px; }
.dt-phase { margin: 0; text-align: center; color: var(--p-sage); font-size: 13.5px; text-transform: uppercase; letter-spacing: .08em; }
.dt-status { margin: 0; min-height: 2.8em; display: grid; place-items: center; text-align: center; color: var(--p-cream); font-size: 16px; font-weight: 600; line-height: 1.35; }
.dt-msg {
    margin: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: #8d2a1f;
    border: 1px solid #ffb4a8;
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
}
@media (prefers-reduced-motion: no-preference) {
    .dt-msg:not([hidden]) { animation: dt-msg-in .3s ease; }
}
@keyframes dt-msg-in { from { transform: scale(.92); opacity: 0; } }
.dt-cancel { align-self: center; }

@media (max-width: 1000px) {
    .dt-game { --board-max: min(100%, 640px); }
    .dt-board-col { width: 100%; max-width: 640px; }
}
@media (max-width: 520px) {
    .dt-page .tv-main, .dt-page .kz-main { padding-left: 8px; padding-right: 8px; }
    .dt-status { font-size: 15px; min-height: 2.6em; }
    .dt-msg { font-size: 15px; }
    .dt-stats { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .dt-pt.is-target::before { animation: none; }
    .dt-pt.is-selected .dt-piece { transform: translate(-50%, -50%); }
}