.tabla-sarmal{
  --tb-zemin-1: var(--y-yuzey-2, #4a3626);
  --tb-zemin-2: var(--y-yuzey-3, #33241a);
  --tb-alan-1:  var(--y-yuzey, #d9c3a5);
  --tb-alan-2:  var(--y-yuzey-alt, #c8ab88);
  --tb-cita:    var(--y-kenar-koyu, #3b2a1d);
  --tb-tepsi:   var(--y-kenar-koyu, #3b2a1d);
  --tb-hane-a:  #8c4a3a;
  --tb-hane-b:  #e8dcc6;
  --tb-pul0-1:  #fbf7f0;
  --tb-pul0-2:  #cfc4b2;
  --tb-pul1-1:  #4c4a52;
  --tb-pul1-2:  #232228;
  --tb-pul-kenar: rgba(0,0,0,.35);
  --tb-vurgu:   var(--y-vurgu, #f2b134);
  --tb-zar:     #f7f3ea;
  --tb-zar-nokta: #2a2520;
  --tb-metin:   var(--y-metin, #1d1a16);
  --tb-logo:    #2b1a10;   /* kakma rengi: koyu ahşap tonu */
}
@media (prefers-color-scheme: dark){
  .tabla-sarmal{
    --tb-alan-1: var(--y-yuzey, #7d654a);
    --tb-alan-2: var(--y-yuzey-alt, #6a5440);
    --tb-hane-a: #97513f;
    --tb-hane-b: #cdbb9d;
  }
}
:root[data-theme="dark"] .tabla-sarmal{
  --tb-alan-1: var(--y-yuzey, #7d654a);
  --tb-alan-2: var(--y-yuzey-alt, #6a5440);
  --tb-hane-a: #97513f;
  --tb-hane-b: #cdbb9d;
}
:root[data-theme="light"] .tabla-sarmal{
  --tb-alan-1: var(--y-yuzey, #d9c3a5);
  --tb-alan-2: var(--y-yuzey-alt, #c8ab88);
  --tb-hane-a: #8c4a3a;
  --tb-hane-b: #e8dcc6;
}

.tabla-sarmal{ width:100%; max-width:960px; margin:0 auto; }
.tabla{ width:100%; height:auto; display:block; }

.g-zemin-1{ stop-color: var(--tb-zemin-1); }
.g-zemin-2{ stop-color: var(--tb-zemin-2); }
.g-alan-1{  stop-color: var(--tb-alan-1); }
.g-alan-2{  stop-color: var(--tb-alan-2); }
.g-pul0-1{  stop-color: var(--tb-pul0-1); }
.g-pul0-2{  stop-color: var(--tb-pul0-2); }
.g-pul1-1{  stop-color: var(--tb-pul1-1); }
.g-pul1-2{  stop-color: var(--tb-pul1-2); }

.tabla-zemin{ fill:url(#gZemin); }
.tabla-oyunalani{ fill:url(#gAlan); }
.tabla-cita{ fill:var(--tb-cita); }
.tabla-tepsi{ fill:var(--tb-tepsi); }

.hane{ stroke: rgba(0,0,0,.18); stroke-width:1; }
.hane-a{ fill: var(--tb-hane-a); }
.hane-b{ fill: var(--tb-hane-b); }

/* Pul: gövde gradyanı + iç halka = "üstte duruyor" hissi.
   Doku görseline gerek yok, gölge işi yapıyor. */
.pul-govde{ stroke: var(--tb-pul-kenar); stroke-width:1.2; }
.pul-0 .pul-govde{ fill:url(#gPul0); }
.pul-1 .pul-govde{ fill:url(#gPul1); }
.pul-halka{ fill:none; stroke: rgba(0,0,0,.16); stroke-width:2; }
.pul-1 .pul-halka{ stroke: rgba(255,255,255,.14); }

/* Hareket: lineer geçiş oyuncak gibi durur — hafif ease-out + oturma. */
.pul{ transition: transform .26s cubic-bezier(.22,.9,.28,1.06); }
.pul-secili .pul-govde{ stroke: var(--tb-vurgu); stroke-width:3.5; }

.pul-rozet circle{ fill: rgba(0,0,0,.62); }
.pul-rozet text{
  fill:#fff; font: 700 20px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  text-anchor:middle;
}

.hedef{
  fill: var(--tb-vurgu); opacity:.34;
  animation: tb-nabiz 1.25s ease-in-out infinite;
}
@keyframes tb-nabiz{ 0%,100%{opacity:.22} 50%{opacity:.55} }
@media (prefers-reduced-motion: reduce){
  .hedef{ animation:none; opacity:.4 }
  .pul{ transition:none }
}

.iz-hane{ fill: var(--tb-vurgu); opacity:.14; }

.dilim{ stroke: rgba(0,0,0,.3); stroke-width:1; }
.dilim-0{ fill: var(--tb-pul0-1); }
.dilim-1{ fill: var(--tb-pul1-1); }

.zar-govde{ fill: var(--tb-zar); stroke: rgba(0,0,0,.28); stroke-width:1.2; }
.zar-nokta{ fill: var(--tb-zar-nokta); }

/* Logo kakması — tahtaya işlenmiş gibi soluk. Pulların okunmasını engellemez. */
.tabla-logo-damla{ fill: var(--tb-logo, #000); opacity:.24; }
.tabla-logo-parlak{ fill: #fff; opacity:.14; }
/* Oyma etkisi: alt katman açık (ışık), üst katman koyu (oyuk). */
.tabla-logo-yazi-golge{ fill:#fff; opacity:.22; text-anchor:start;
  font: 700 27px/1 'Poppins','Segoe UI',system-ui,sans-serif; letter-spacing:.5px; }
.tabla-logo-yazi{ fill: var(--tb-logo, #000); opacity:.46; text-anchor:start;
  font: 700 27px/1 'Poppins','Segoe UI',system-ui,sans-serif; letter-spacing:.5px; }

/* Yön okları — alttaki oyuncunun kendi pul rengiyle. */
.yon-ok-0, .yon-ok-0-cizgi{ fill: var(--tb-pul0-1); opacity:.5; }
.yon-ok-1, .yon-ok-1-cizgi{ fill: var(--tb-pul1-1); opacity:.65; }

/* ⚠ TIKLAMA: pullar hanelerin ÜSTÜNE çizilir ve tıklamayı yutar; ayrıca hane
   üçgeni uca doğru daraldığı için uçtaki pul üçgenin dışında kalır. Bu yüzden
   en üstte şeffaf bir tıklama katmanı var (.hane-tik) ve çizim öğeleri
   tıklamayı geçirir. Bu satır olmadan "pula tıklıyorum, bir şey olmuyor". */
.hane-tik{ fill: transparent; }
.pul, .pul-rozet, .hedef, .iz-hane, .dilim, .zar, .haneler,
.tabla-logo, .tabla-logo-yazi, .tabla-logo-yazi-golge{ pointer-events: none; }
.om-oynanabilir .hane-tik{ cursor: pointer; }
.om-oynanabilir .hane-tik:hover{ fill: rgba(255,255,255,.07); }