/* Crystal Merge — 4×4, 2048 mekaniği.
 *
 * Taşlar ızgara hücresi DEĞİL, mutlak konumlu ve `transform` ile
 * taşınıyor: kayma ancak böyle akıcı oluyor. Izgara hücreleri altta
 * yalnız zemin olarak duruyor. */

.kristal-alan {
  position: relative;
  width: min(94vw, 440px);
  aspect-ratio: 1;
  padding: var(--ic, 10px);
  border-radius: var(--kose-buyuk);
  background: #17141f;
  box-shadow: var(--golge-orta);
  touch-action: none;
  --ic: 10px;
  --bosluk: 8px;
}

.zemin {
  position: absolute;
  inset: var(--ic);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bosluk);
}

.zemin div { border-radius: var(--kose-kucuk); background: rgba(255, 255, 255, 0.05); }

.tas {
  position: absolute;
  left: var(--ic);
  top: var(--ic);
  width: calc((100% - 2 * var(--ic) - 3 * var(--bosluk)) / 4);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  gap: 1px;
  border-radius: var(--kose-kucuk);
  background: var(--tas-renk, #3f3a52);
  color: #fff;
  font-family: var(--yazi-baslik);
  will-change: transform;
  transition: transform 130ms cubic-bezier(0.3, 0.9, 0.4, 1);
}

.tas__simge { font-size: clamp(1.4rem, 7vw, 2.1rem); line-height: 1; }
.tas__ad { font-size: 0.58rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; }

.tas.yeni { animation: dogus 180ms ease-out; }
@keyframes dogus { from { transform: var(--yer) scale(0.3); opacity: 0; } }

.tas.birlesti { animation: birlesme 200ms ease-out; z-index: 3; }
@keyframes birlesme {
  0% { transform: var(--yer) scale(1); }
  55% { transform: var(--yer) scale(1.2); }
  100% { transform: var(--yer) scale(1); }
}

/* Seviye rengi: soğuktan sıcağa. Sayı yerine form kullanıldığı için
   renk ilerlemenin tek ölçeği — sırası okunabilir olmalı. */
.tas[data-seviye='1']  { --tas-renk: #3b4b6b; }
.tas[data-seviye='2']  { --tas-renk: #2f6b7a; }
.tas[data-seviye='3']  { --tas-renk: #2b7f66; }
.tas[data-seviye='4']  { --tas-renk: #4f8438; }
.tas[data-seviye='5']  { --tas-renk: #8a8a2c; }
.tas[data-seviye='6']  { --tas-renk: #b07a20; }
.tas[data-seviye='7']  { --tas-renk: #c2591f; }
.tas[data-seviye='8']  { --tas-renk: #c33b2e; }
.tas[data-seviye='9']  { --tas-renk: #b02a63; }
.tas[data-seviye='10'] { --tas-renk: #7c2fb0; }
.tas[data-seviye='11'] {
  --tas-renk: #e63329;
  box-shadow: 0 0 22px rgba(230, 51, 41, 0.65);
  animation: ultimate 2.4s ease-in-out infinite;
}

@keyframes ultimate {
  0%, 100% { box-shadow: 0 0 18px rgba(230, 51, 41, 0.5); }
  50% { box-shadow: 0 0 34px rgba(230, 51, 41, 0.85); }
}

.evrim {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--sonuk);
}
.evrim b { color: var(--komur); font-family: var(--yazi-baslik); }