/* games/2048/style.css */

/* ── 遊戲說明 ── */
.game-desc {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: 12px;
  line-height: 1.5;
}

/* ── 棋盤底 ── */
.g2048-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows:    repeat(4, 1fr);
  gap: 12px;
  padding: 12px;
  background: #bbada0;
  border-radius: 12px;
  width: 100%;
  aspect-ratio: 1;         /* 始終保持正方形 */
  box-sizing: border-box;
  max-width: 440px;
  margin: 0 auto;
  user-select: none;
  touch-action: none;      /* 防止頁面跟著捲動 */
}

/* ── 格子 ── */
.g2048-cell {
  border-radius: 8px;
  background: rgba(238, 228, 218, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
  /* 背景顏色漸變讓數字合併有顏色轉換感 */
  transition: background 0.25s ease, color 0.25s ease, transform 0.12s ease;
  font-size: clamp(18px, 4.5vw, 40px);
  will-change: transform, background;
}

/* ── 數字顏色 ── */
.g2048-cell[data-val="2"]    { background:#eee4da; color:#776e65; }
.g2048-cell[data-val="4"]    { background:#ede0c8; color:#776e65; }
.g2048-cell[data-val="8"]    { background:#f2b179; color:#f9f6f2; }
.g2048-cell[data-val="16"]   { background:#f59563; color:#f9f6f2; }
.g2048-cell[data-val="32"]   { background:#f67c5f; color:#f9f6f2; }
.g2048-cell[data-val="64"]   { background:#f65e3b; color:#f9f6f2; }
.g2048-cell[data-val="128"]  { background:#edcf72; color:#f9f6f2; font-size: clamp(14px, 3.5vw, 32px); }
.g2048-cell[data-val="256"]  { background:#edcc61; color:#f9f6f2; font-size: clamp(14px, 3.5vw, 32px); }
.g2048-cell[data-val="512"]  { background:#edc850; color:#f9f6f2; font-size: clamp(14px, 3.5vw, 32px); }
.g2048-cell[data-val="1024"] { background:#edc53f; color:#f9f6f2; font-size: clamp(12px, 3vw, 28px); }
.g2048-cell[data-val="2048"] {
  background:#edc22e; color:#f9f6f2;
  font-size: clamp(12px, 3vw, 28px);
  box-shadow: 0 0 24px rgba(237, 194, 46, 0.8);
  animation: win-glow 0.6s ease-in-out infinite alternate;
}
.g2048-cell[data-val="4096"] { background:#3c3a32; color:#f9f6f2; font-size: clamp(10px, 2.5vw, 24px); }
.g2048-cell[data-val="8192"] { background:#1a1a22; color:#f9f6f2; font-size: clamp(10px, 2.5vw, 24px); }

/* 合併動畫 */
.g2048-cell.merged {
  animation: pop 0.3s ease-in-out;
}
/* 新增動畫 */
.g2048-cell.new {
  animation: appear 0.25s ease-in-out;
}

@keyframes pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes appear {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes win-glow {
  from { box-shadow: 0 0 16px rgba(237, 194, 46, 0.6); }
  to   { box-shadow: 0 0 32px rgba(237, 194, 46, 1); }
}

/* ── D-pad ── */
.dpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 12px 0 6px;
}
.dpad-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.dpad-btn {
  width: 56px;
  height: 56px;
  font-size: 22px;
  border-radius: 10px;
  border: none;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  font-family: inherit;
}
.dpad-btn:active {
  transform: scale(0.92);
  background: var(--color-primary-dark);
}
.dpad-center {
  /* 下鍵在中間 */
}

/* 桌面版桌面大時隱藏 D-pad */
@media (min-width: 640px) {
  .dpad { display: none; }
}

/* 夜間模式棋盤 */
[data-theme="dark"] .g2048-board {
  background: #4a4038;
}
[data-theme="dark"] .g2048-cell:not([data-val]) {
  background: rgba(238,228,218,0.15);
}