/* ============================================================
   game.css - أنماط اللوحة والبلاطات المتحركة
   ============================================================ */

/* ============================================================
   اللوحة
   ============================================================ */
#game-board {
  /* يُحدَّد حجمه في JS */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* منع الـ scroll عند اللمس على اللوحة */
  touch-action: none;
  position: relative;
  direction: ltr;
}

/* ============================================================
   البلاطات - حركات وتأثيرات
   ============================================================ */
.tile {
  position: absolute;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  cursor: default;

  /* حركة الانتقال */
  transition: top .1s ease, left .1s ease, background .15s ease, transform .12s ease;
  will-change: top, left;
}

/* تأثير ظهور بلاطة جديدة */
@keyframes tileAppear {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1);   opacity: 1; }
}

.tile-new {
  animation: tileAppear 0.22s ease forwards;
}

/* تأثير الدمج */
@keyframes tileMerge {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.tile-merged {
  animation: tileMerge 0.2s ease forwards;
}

/* توهج لبلاطة 2048 */
.tile-2048 {
  box-shadow: 0 0 24px rgba(237,194,46,.85), 0 0 6px rgba(237,194,46,.5);
}

/* ظلال خفيفة للبلاطات الكبيرة */
.tile[data-value="128"],
.tile[data-value="256"],
.tile[data-value="512"],
.tile[data-value="1024"],
.tile[data-value="2048"] {
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}

/* ============================================================
   خلفية الخلايا الفارغة
   ============================================================ */
.board-bg {
  pointer-events: none;
}

/* ============================================================
   تخطيط اللوحة الرئيسي (wrapper)
   ============================================================ */
.board-wrapper {
  padding: 0 4px;
}

/* ============================================================
   تأثير عند الضغط على أزرار التحكم
   ============================================================ */
.ctrl-btn:active {
  transform: scale(0.88);
  background: #3c3a32;
}

/* ============================================================
   تأثير hover على لوحة اللعب الكاملة (على الكمبيوتر)
   ============================================================ */
@media (hover: hover) {
  #game-board:hover {
    box-shadow: 0 6px 30px rgba(187,173,160,.5);
  }
}