/* Tavla ve Türk daması: boyutlardan bağımsız ahşap ve torna pul yüzeyleri. */
body[data-tahta] {
  --damar: url('/assets/ahsap-damar.svg');
  --ceviz: linear-gradient(115deg,#382013,#815334 24%,#52301c 51%,#784b2c 78%,#342014);
}
body[data-tahta] #tahta {
  border-color:#593720 #3b2518 #2a190f #724c30;
  background:var(--damar),var(--ceviz);
  box-shadow:inset 0 0 0 1px #e4b87580,inset 0 0 0 4px #2c190a80,
    0 3px 0 #23170f,0 8px 0 -2px #432919,0 18px 28px #0007;
}
body[data-tahta="tavla"] #tahta::before,
body[data-tahta="tavla"] #tahta::after {
  background:linear-gradient(#edcf91,#bd9152 26%,#4b2a12 48%,#cea264 64%,#4a2b17);
  box-shadow:0 1px 2px #1b100bbc;
}
body[data-tahta="tavla"] .yari {
  background:var(--damar),radial-gradient(ellipse at 35% 30%,#f6dfb94d,transparent 65%),
    linear-gradient(100deg,#cba675,#e2c699 48%,#c4a071);
  box-shadow:inset 0 0 0 1px #f6dcaa,inset 0 0 0 3px #7a523656,
    inset 0 5px 12px #50311565,inset 0 -2px 5px #50311555;
}
body[data-tahta="tavla"] .yari:last-child { background-position:70px 40px,center,center; }
body[data-tahta="tavla"] .nokta::before,
body[data-tahta="tavla"] .satir.alt .nokta.k1::before {
  pointer-events:none;
  filter:none;
  background:var(--damar),linear-gradient(90deg,#41251b,#815337 45%,#593422 90%,#b18a51);
}
body[data-tahta="tavla"] .nokta.k0::before,
body[data-tahta="tavla"] .satir.alt .nokta.k0::before {
  background:var(--damar),linear-gradient(90deg,#d3b680,#f6e7c2 40%,#e9d5a7 85%,#ad8859);
}
body[data-tahta="tavla"] #orta-bar {
  position:relative;
  background:var(--damar),linear-gradient(90deg,#301b10,#775035 24%,#895c39 48%,#583620 78%,#28180f);
  box-shadow:inset 2px 0 2px #e6bd784d,inset -3px 0 5px #120c09,0 0 0 2px #3a2518;
}
body[data-tahta="tavla"] #orta-bar::before,
body[data-tahta="tavla"] #orta-bar::after {
  content:""; position:absolute; left:22%; right:22%; height:13px;
  background:linear-gradient(90deg,#65451d,#dfbd70 24%,#9b7435 48%,#ebce86 55%,#755124);
  border:1px solid #493419; border-radius:2px; box-shadow:0 2px 3px #0007;
  pointer-events:none;
}
body[data-tahta="tavla"] #orta-bar::before { top:43%; }
body[data-tahta="tavla"] #orta-bar::after { bottom:43%; }
body[data-tahta="tavla"] #bar-ust,
body[data-tahta="tavla"] #bar-alt { position:relative; z-index:1; }
/* Laque yüz, oyulmuş iç halka, aşağı doğru kısa bir yanak ve temas gölgesi. */
body[data-tahta] :is(.pul,.tas) {
  position:relative; isolation:isolate;
  border:1px solid var(--pul-kenar);
  background:radial-gradient(circle at 50% 50%,transparent 55%,var(--pul-oluk) 57% 61%,
      var(--pul-isik) 63% 66%,transparent 68%),
    linear-gradient(145deg,var(--pul-acik),var(--pul-yuz) 52%,var(--pul-golge));
  box-shadow:inset 0 1px 1px var(--pul-isik),inset 0 -2px 2px var(--pul-oluk),
    0 2px 0 var(--pul-kenar),0 4px 0 var(--pul-yan),0 6px 5px #0007;
  color:var(--pul-yazi); font-weight:800; text-shadow:0 1px var(--pul-isik);
}
body[data-tahta] :is(.pul,.tas).beyaz {
  --pul-acik:#fff9e7; --pul-yuz:#eddfbe; --pul-golge:#c6ad7f;
  --pul-oluk:#b89d6a; --pul-isik:#fff8df; --pul-kenar:#aa8b5e;
  --pul-yan:#95764c; --pul-yazi:#392715;
}
body[data-tahta] :is(.pul,.tas).siyah {
  --pul-acik:#665146; --pul-yuz:#32271f; --pul-golge:#201812;
  --pul-oluk:#19120d; --pul-isik:#987b5d; --pul-kenar:#19120e;
  --pul-yan:#110d09; --pul-yazi:#fff3cb;
}
body[data-tahta="tavla"] .pul::after { content:none; }
body[data-tahta="tavla"] .pul[data-adet]::after {
  content:attr(data-adet); position:absolute; right:-4px; top:-4px;
  min-width:1.4em; height:1.4em; padding:0 3px; border-radius:1em;
  display:grid; place-items:center; background:#244b34; color:#fff4cb;
  border:1px solid #f3d486; box-shadow:0 1px 3px #0007;
  font:800 11px/1 system-ui; text-shadow:none; pointer-events:none;
}
body[data-tahta="tavla"] .off-tepsi {
  border:1px solid #b68b554d;
  background:var(--damar),linear-gradient(100deg,#543722,#322013);
  box-shadow:inset 0 3px 7px #140c0999,0 1px 0 #d3ad6755;
}
body[data-tahta="tavla"] .off-tepsi.zemin-acik {
  background:var(--damar),linear-gradient(100deg,#dfc798,#bfa16d);
}
body[data-tahta="tavla"] .off-tepsi.hedef {
  background:linear-gradient(#315436,#203d26); outline:3px dashed #a3efad;
}
body[data-tahta="tavla"] .off-bar { box-shadow:inset 1px 0 1px #ffffff60,1px 2px 2px #0005; }
body[data-tahta="dama"] #tahta { border-width:8px; border-radius:5px; }
body[data-tahta="dama"] .kare {
  background:var(--damar),linear-gradient(120deg,#ecd7ae,#d7bc8e);
  box-shadow:inset 0 0 0 .5px #734a2929;
}
body[data-tahta="dama"] .kare.koyu {
  background:var(--damar),linear-gradient(120deg,#ab8257,#8a613d);
  background-position:30px 12px,center;
}
body[data-tahta="dama"] .tas { z-index:1; }
body[data-tahta="dama"] .tas.sah {
  outline:2px solid #e4b752; outline-offset:-2px;
  box-shadow:inset 0 1px 2px var(--pul-isik),0 2px 0 var(--pul-kenar),
    0 4px 0 #bd934b,0 6px 0 var(--pul-kenar),0 8px 5px #0007;
}
body[data-tahta="dama"] .tas.sah::after {
  color:var(--pul-yazi); text-shadow:0 1px var(--pul-isik);
  font-size:clamp(18px,3.5vw,32px);
}
body[data-tahta="dama"] .kare.secili { outline:3px solid #f4c542; outline-offset:-3px; }
body[data-tahta="dama"] .kare.hedef::after { z-index:2; }
@media(max-height:480px) {
  body[data-tahta="dama"] #tahta { border-width:4px; }
  body[data-tahta="tavla"] .pul[data-adet]::after { font-size:9px; right:-3px; top:-3px; }
}