/* --- 2048 테마 변종 CSS ---
 * body class 기반 scoped selector.
 * game.css의 classic 팔레트는 default/fallback 역할.
 *
 * 테마:
 *   theme-2048-classic (default)  — 원작 2048 베이지/주황/골드
 *   theme-2048-dark    — 네온 cyan → purple → fuchsia
 *   theme-2048-pastel  — 민트/핑크/라벤더
 */

/* ========== classic (game.css와 동일하지만 scoped로 명시) ========== */
body.theme-2048-classic .board { background: #bbada0 !important; }
body.theme-2048-classic .board .cell { background: rgba(238, 228, 218, 0.35) !important; }
body.theme-2048-classic .tile[data-val="2"]     { background: #eee4da !important; color: #776e65 !important; }
body.theme-2048-classic .tile[data-val="4"]     { background: #ede0c8 !important; color: #776e65 !important; }
body.theme-2048-classic .tile[data-val="8"]     { background: #f2b179 !important; color: #f9f6f2 !important; }
body.theme-2048-classic .tile[data-val="16"]    { background: #f59563 !important; color: #f9f6f2 !important; }
body.theme-2048-classic .tile[data-val="32"]    { background: #f67c5f !important; color: #f9f6f2 !important; }
body.theme-2048-classic .tile[data-val="64"]    { background: #f65e3b !important; color: #f9f6f2 !important; }
body.theme-2048-classic .tile[data-val="128"]   { background: #edcf72 !important; color: #f9f6f2 !important; }
body.theme-2048-classic .tile[data-val="256"]   { background: #edcc61 !important; color: #f9f6f2 !important; }
body.theme-2048-classic .tile[data-val="512"]   { background: #edc850 !important; color: #f9f6f2 !important; }
body.theme-2048-classic .tile[data-val="1024"]  { background: #edc53f !important; color: #f9f6f2 !important; }
body.theme-2048-classic .tile[data-val="2048"]  { background: #edc22e !important; color: #f9f6f2 !important; }
body.theme-2048-classic .tile[data-val="4096"],
body.theme-2048-classic .tile[data-val="8192"],
body.theme-2048-classic .tile[data-val="16384"],
body.theme-2048-classic .tile[data-val="32768"],
body.theme-2048-classic .tile[data-val="65536"],
body.theme-2048-classic .tile[data-val="131072"] { background: #3c3a32 !important; color: #f9f6f2 !important; }
body.theme-2048-classic .overlay { background: rgba(238, 228, 218, 0.7) !important; }
body.theme-2048-classic .overlay-title,
body.theme-2048-classic .overlay-sub { color: #776e65 !important; }
body.theme-2048-classic .overlay-btn { background: #8f7a66 !important; color: #fff !important; }
body.theme-2048-classic .overlay-btn.primary { background: #776e65 !important; }

/* ========== dark (네온) ========== */
body.theme-2048-dark { background-color: #0b1120 !important; color: #e5e7eb; }
body.theme-2048-dark .board { background: #0f172a !important; }
body.theme-2048-dark .board .cell { background: #1e293b !important; }
body.theme-2048-dark .tile { color: #ffffff !important; }
body.theme-2048-dark .tile[data-val="2"]     { background: #164e63 !important; }
body.theme-2048-dark .tile[data-val="4"]     { background: #155e75 !important; }
body.theme-2048-dark .tile[data-val="8"]     { background: #0e7490 !important; }
body.theme-2048-dark .tile[data-val="16"]    { background: #0891b2 !important; }
body.theme-2048-dark .tile[data-val="32"]    { background: #06b6d4 !important; }
body.theme-2048-dark .tile[data-val="64"]    { background: #22d3ee !important; color: #0b1120 !important; }
body.theme-2048-dark .tile[data-val="128"]   { background: #a855f7 !important; }
body.theme-2048-dark .tile[data-val="256"]   { background: #9333ea !important; }
body.theme-2048-dark .tile[data-val="512"]   { background: #c026d3 !important; }
body.theme-2048-dark .tile[data-val="1024"]  { background: #d946ef !important; }
body.theme-2048-dark .tile[data-val="2048"]  { background: #f0abfc !important; color: #1e1b4b !important; }
body.theme-2048-dark .tile[data-val="4096"],
body.theme-2048-dark .tile[data-val="8192"],
body.theme-2048-dark .tile[data-val="16384"],
body.theme-2048-dark .tile[data-val="32768"],
body.theme-2048-dark .tile[data-val="65536"],
body.theme-2048-dark .tile[data-val="131072"] {
  background: linear-gradient(135deg, #22d3ee, #d946ef) !important;
  color: #ffffff !important;
}
body.theme-2048-dark .overlay { background: rgba(15, 23, 42, 0.75) !important; }
body.theme-2048-dark .overlay-title { color: #f0abfc !important; }
body.theme-2048-dark .overlay-sub { color: #cbd5e1 !important; }
body.theme-2048-dark .overlay-btn { background: #4c1d95 !important; color: #f0abfc !important; }
body.theme-2048-dark .overlay-btn.primary { background: #7c3aed !important; color: #ffffff !important; }
body.theme-2048-dark header { background: #0f172a !important; }
body.theme-2048-dark header a { color: #cbd5e1 !important; }
body.theme-2048-dark header a.text-gray-900 { color: #f0abfc !important; }
body.theme-2048-dark .bg-white { background-color: #1f2937 !important; border-color: rgba(255,255,255,0.1) !important; }
body.theme-2048-dark .text-gray-900, body.theme-2048-dark .text-gray-800 { color: #f9fafb !important; }
body.theme-2048-dark .text-gray-500, body.theme-2048-dark .text-gray-400 { color: #9ca3af !important; }
body.theme-2048-dark .text-gray-300 { color: #6b7280 !important; }
body.theme-2048-dark .border-gray-100, body.theme-2048-dark .border-gray-200 { border-color: rgba(255,255,255,0.08) !important; }
body.theme-2048-dark .bg-gray-50 { background-color: #0b1120 !important; }
body.theme-2048-dark .bg-indigo-50 { background-color: rgba(168,85,247,0.15) !important; border-color: rgba(168,85,247,0.25) !important; }
body.theme-2048-dark .text-indigo-600, body.theme-2048-dark .text-indigo-700 { color: #c4b5fd !important; }
body.theme-2048-dark .bg-indigo-600 { background-color: #7c3aed !important; }
body.theme-2048-dark .bg-indigo-600:hover, body.theme-2048-dark .hover\:bg-indigo-700:hover { background-color: #6d28d9 !important; }
body.theme-2048-dark .bg-amber-50 { background-color: rgba(251,191,36,0.08) !important; border-color: rgba(251,191,36,0.2) !important; }
body.theme-2048-dark .text-amber-500 { color: #fde047 !important; }
body.theme-2048-dark .text-amber-700, body.theme-2048-dark .text-amber-800 { color: #fbbf24 !important; }
body.theme-2048-dark .text-emerald-700 { color: #34d399 !important; }
body.theme-2048-dark footer { background: #0b1120 !important; }
body.theme-2048-dark footer p { color: #6b7280 !important; }

/* ========== pastel ========== */
body.theme-2048-pastel { background-color: #fffafc !important; color: #374151; }
body.theme-2048-pastel .board { background: #fef3f2 !important; }
body.theme-2048-pastel .board .cell { background: #fce7f3 !important; }
body.theme-2048-pastel .tile { color: #374151 !important; }
body.theme-2048-pastel .tile[data-val="2"]     { background: #d1fae5 !important; }
body.theme-2048-pastel .tile[data-val="4"]     { background: #a7f3d0 !important; }
body.theme-2048-pastel .tile[data-val="8"]     { background: #6ee7b7 !important; }
body.theme-2048-pastel .tile[data-val="16"]    { background: #fde68a !important; }
body.theme-2048-pastel .tile[data-val="32"]    { background: #fcd34d !important; }
body.theme-2048-pastel .tile[data-val="64"]    { background: #fbcfe8 !important; }
body.theme-2048-pastel .tile[data-val="128"]   { background: #f9a8d4 !important; }
body.theme-2048-pastel .tile[data-val="256"]   { background: #f472b6 !important; color: #ffffff !important; }
body.theme-2048-pastel .tile[data-val="512"]   { background: #ddd6fe !important; }
body.theme-2048-pastel .tile[data-val="1024"]  { background: #c4b5fd !important; }
body.theme-2048-pastel .tile[data-val="2048"]  { background: #a78bfa !important; color: #ffffff !important; }
body.theme-2048-pastel .tile[data-val="4096"],
body.theme-2048-pastel .tile[data-val="8192"],
body.theme-2048-pastel .tile[data-val="16384"],
body.theme-2048-pastel .tile[data-val="32768"],
body.theme-2048-pastel .tile[data-val="65536"],
body.theme-2048-pastel .tile[data-val="131072"] { background: #8b5cf6 !important; color: #ffffff !important; }
body.theme-2048-pastel .overlay { background: rgba(254, 243, 242, 0.85) !important; }
body.theme-2048-pastel .overlay-title { color: #be185d !important; }
body.theme-2048-pastel .overlay-sub { color: #64748b !important; }
body.theme-2048-pastel .overlay-btn { background: #f9a8d4 !important; color: #881337 !important; }
body.theme-2048-pastel .overlay-btn.primary { background: #f472b6 !important; color: #ffffff !important; }
body.theme-2048-pastel header { background: #fffafc !important; }
body.theme-2048-pastel .bg-white { background-color: #ffffff !important; }
body.theme-2048-pastel .bg-indigo-600 { background-color: #f472b6 !important; }
body.theme-2048-pastel .bg-indigo-600:hover, body.theme-2048-pastel .hover\:bg-indigo-700:hover { background-color: #ec4899 !important; }
body.theme-2048-pastel .text-indigo-600, body.theme-2048-pastel .text-indigo-700 { color: #ec4899 !important; }
body.theme-2048-pastel .bg-indigo-50 { background-color: #fdf2f8 !important; border-color: #fbcfe8 !important; }
body.theme-2048-pastel .border-indigo-100, body.theme-2048-pastel .border-indigo-200 { border-color: #fbcfe8 !important; }