/* Keyfi 101 — okey taşı görünümü.
   Ölçüler görseldeki 1904px genişlikli masadan alındı: taş 44x60,
   göz aralığı 48px. Her yerde --ts çarpanıyla küçültülüp büyütülür.
   İstakadaki taş daha uzundur ve gözü tam doldurur (48x70, bkz.
   css/table.css).

   Görünüş örnek masadaki taştan ölçüldü: sıcak ten rengi bir gövde, üst
   kısmında sağa doğru yükselen keskin bir çizgiyle biten parlama, üst ve
   sol kenarda ince ışık, sağ ve alt kenarda iki piksellik koyu kahve —
   taşa kalınlık veren bu koyuluk. */

.tile {
  --ts: 1;
  /* kenar renkleri: üst, sağ, alt, sol. Üst ve sol açık bir çizgi, hemen
     içinde iki piksellik parlak bant (örnekte 236/231, gövde 218). */
  --tile-border: #e4dac8 #5a4328 #4f3820 #d9ccb2;
  --tile-shadow:
    inset calc(2px * var(--ts)) calc(2px * var(--ts)) 0 rgba(255, 252, 244, .55),
    inset calc(-1px * var(--ts)) calc(-1px * var(--ts)) 0 #8f7759,
    0 calc(1px * var(--ts)) calc(2px * var(--ts)) rgba(0, 0, 0, .35);
  position: relative;
  width: calc(44px * var(--ts));
  height: calc(60px * var(--ts));
  flex: none;
  /* Köşeler örnekteki gibi yumuşak: enin yaklaşık %16'sı. */
  border-radius: calc(7px * var(--ts));
  /* Parlama: üst kısım açık, %40 civarında sert bir geçişle gövde rengine
     iner. 163 derece, çizgiyi sağa doğru yükseltiyor. */
  background:
    linear-gradient(163deg,
      #f2e9db 0%, #e7d9c2 17%, #e3d2b7 38%,
      #dac5a2 42%, #d9c39f 72%, #d5bd97 100%);
  border: 1px solid;
  border-color: var(--tile-border);
  box-shadow: var(--tile-shadow);
  user-select: none;
  -webkit-user-select: none;
  color: var(--tc, #333);
}

/* Taşın yüzü ayrı bir katmandır: ters çevrilince yalnızca bu katman gizlenir,
   taşın gövdesi, gölgesi ve seçim zıplaması olduğu gibi kalır. */
.tile-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity .16s ease;
}

/* Rakamlar örnekteki gibi Arial Black: dolgun (çizgi rakam boyunun
   dörtte biri), geniş, 7'nin gövdesi çapraz, 1'in bayrağı var tabanı yok.
   İki basamaklı sayı tek basamaklıyla aynı boyda, taşın dörtte üçünü
   kaplar. Arial Black örnekteki rakamdan biraz geniş ("4": en/boy 0,96,
   örnekte 0,86), o yüzden enine %90'a sıkıştırılıyor. Arial Black'i
   olmayan cihazda benzeri Archivo Black devreye girer. */
.tile-num {
  position: relative;
  margin-top: calc(.5px * var(--ts));
  font-family: "Arial Black", "Archivo Black", Arial, sans-serif;
  font-size: calc(27.5px * var(--ts));
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0;
  transform: scaleX(.9);
}
.tile.is-wide .tile-num { letter-spacing: calc(-1px * var(--ts)); }

/* Oyma: rakam yüzeye basılmış değil, içine oyulmuş gibi durur. İki katman:

   1) Alttaki katman (rakamın kendisi, saydam): yalnızca kenar gölgelerini
      çizer — dışarıda üst-sol koyu, alt-sağ parlak bir çizgi.
   2) Üstteki katman (::before, aynı rakam): dolguyu çizer. Üst kenarından
      içeri gölge düşer (oyuğun üst duvarı gölgede), alt kenarı hafif
      aydınlanır. Renk, rakamın biçimine kırpılmış arka plandan gelir.
      Dolgu üstte olduğu için kenar gölgeleri rakamın içine düşmez. */
.tile-num:not(.tile-yildiz) {
  color: transparent;
  text-shadow:
    calc(-.6px * var(--ts)) calc(-1.1px * var(--ts)) 0 rgba(58, 38, 12, .4),
    calc(.8px * var(--ts)) calc(1.3px * var(--ts)) 0 rgba(255, 250, 236, .88),
    calc(1.2px * var(--ts)) calc(1.9px * var(--ts)) calc(1px * var(--ts)) rgba(255, 248, 230, .28);
}
.tile-num:not(.tile-yildiz)::before {
  content: attr(data-n);
  position: absolute;
  inset: 0;
  color: transparent;
  text-shadow: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, 0) 36%),
    linear-gradient(0deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, 0) 24%),
    linear-gradient(var(--tc), var(--tc));
  -webkit-background-clip: text;
  background-clip: text;
}

/* Alttaki yuvarlak çukur ve içindeki yıldız: yıldız yüzeye basılmış değil,
   oyulmuş bir yuvanın içinde durur. Üstü gölgede, alt kenarı ışıkta. */
.tile-pip {
  position: absolute;
  left: 50%;
  bottom: calc(5px * var(--ts));
  width: calc(21px * var(--ts));
  height: calc(21px * var(--ts));
  margin-left: calc(-10.5px * var(--ts));
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Örnekten ölçüldü: ışık sol üstten gelir. Çukurun sol-üst iç duvarı ve o
     yanın içi gölgede (~140), sağ-alt yanı aydınlık (~177); sağ-alt dış
     kenarında parlak bir çizgi (~200), sol-üst dış kenarında soluk bir ışık. */
  background: linear-gradient(135deg, #b39b77 0%, #c4ab86 34%, #cdb591 60%, #d1b995 100%);
  box-shadow:
    inset calc(1.2px * var(--ts)) calc(1.6px * var(--ts)) calc(2px * var(--ts)) rgba(66, 44, 16, .55),
    inset calc(-.8px * var(--ts)) calc(-.8px * var(--ts)) 0 rgba(255, 244, 222, .3),
    calc(.7px * var(--ts)) calc(1px * var(--ts)) 0 rgba(255, 248, 232, .9),
    calc(-.5px * var(--ts)) calc(-.7px * var(--ts)) 0 rgba(255, 250, 240, .35);
}
/* Yıldız çukurun dörtte üçüne yakınını doldurur (örnekte 15px / 21px). */
.tile-star {
  width: calc(16.5px * var(--ts));
  height: calc(16.5px * var(--ts));
  fill: currentColor;
  stroke: none;
}

/* Sahte okey: sayının yerinde büyük koyu yıldız, o da oyma. */
.tile-yildiz { display: grid; place-items: center; height: calc(29px * var(--ts)); }
.tile-yildiz .tile-star {
  width: calc(27px * var(--ts));
  height: calc(27px * var(--ts));
  filter:
    drop-shadow(calc(-.6px * var(--ts)) calc(-1.1px * var(--ts)) 0 rgba(58, 38, 12, .4))
    drop-shadow(calc(.8px * var(--ts)) calc(1.3px * var(--ts)) 0 rgba(255, 250, 236, .88));
}

/* Renkler örnek masadan ölçüldü: canlı kırmızı, parlak camgöbeği mavisi,
   altın sarısı ve kömür siyahı. */
.tile.c-red    { --tc: #d60000; }
.tile.c-black  { --tc: #363636; }
.tile.c-blue   { --tc: #03a3d8; }
.tile.c-yellow { --tc: #e2aa00; }
/* sahte okey: iki yıldızı da koyu gri; renk kurallarından sonra gelmeli */
.tile.is-fake  { --tc: #333; }

/* gerçek okey (joker) — altın çerçeveyle belli edilir */
.tile.is-joker {
  border-color: var(--gold);
  box-shadow:
    inset calc(2px * var(--ts)) calc(2px * var(--ts)) 0 rgba(255, 252, 244, .55),
    inset 0 0 0 1px rgba(215, 165, 63, .55),
    0 0 calc(9px * var(--ts)) rgba(215, 165, 63, .5),
    0 calc(1px * var(--ts)) calc(2px * var(--ts)) rgba(0, 0, 0, .35);
}
body.no-joker-hint .tile.is-joker {
  border-color: var(--tile-border);
  box-shadow: var(--tile-shadow);
}

/* ————————————————————————————— kapalı (ters çevrilmiş) taş

   Gerçek taşın arkası boştur: ters çevrilen taş sayısını ve yıldızını
   göstermez, gözde düz bir fildişi dikdörtgen olarak durur. Okey vurgusu da
   kapanır — kapalı bir taş hiçbir şey ele vermemeli. */

.tile.is-flipped .tile-face { opacity: 0; }
.tile.is-flipped {
  border-color: var(--tile-border);
  box-shadow: var(--tile-shadow);
}
/* arkanın dokusu: yüzeydeki ışığın yumuşak yansıması */
.tile.is-flipped::after {
  content: "";
  position: absolute;
  inset: calc(3px * var(--ts));
  border-radius: calc(3px * var(--ts));
  background: linear-gradient(150deg, rgba(255, 255, 255, .34), rgba(190, 168, 126, .16));
  pointer-events: none;
}

/* ————————————————————————————— istakadaki taş durumları */

/* Taşların üstüne gelince hiçbir şey olmaz (kalkma, parlama yok): tek vurgu
   seçimin altın halkası. */
.tile.in-rack { cursor: grab; transition: box-shadow .12s; }
/* Seçili taş yerinden kalkmaz: yalnızca altın halkası ve parıltısı belirir. */
.tile.is-selected {
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 0 0 2px var(--gold-hi),
    0 0 14px rgba(242, 208, 137, .45),
    0 2px 4px rgba(0, 0, 0, .5);
}
/* Sürüklenen taşın yeri boş görünür: arkasında soluk bir kopya (iz) kalmaz. */
.tile.is-dragging { opacity: 0; }
.tile.just-drawn { animation: tile-pop .45s ease-out; }
@keyframes tile-pop {
  0% { transform: translateY(-26px) scale(1.2); box-shadow: 0 0 22px rgba(215, 165, 63, .8); }
  100% { transform: none; }
}