/* Cupcake 2048 主题样式 - 自动生成 */

html body[data-theme="cupcake-2048"] {
  background: #ffeef8 !important;
  min-height: 100vh;
}


    .tile.tile-2 .tile-inner {
      background-image: url('/games/cupcake-2048/assets/images/tiles/2.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: transparent;
    }
      
    .tile.tile-4 .tile-inner {
      background-image: url('/games/cupcake-2048/assets/images/tiles/4.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: transparent;
    }
      
    .tile.tile-8 .tile-inner {
      background-image: url('/games/cupcake-2048/assets/images/tiles/8.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: transparent;
    }
      
    .tile.tile-16 .tile-inner {
      background-image: url('/games/cupcake-2048/assets/images/tiles/16.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: transparent;
    }
      
    .tile.tile-32 .tile-inner {
      background-image: url('/games/cupcake-2048/assets/images/tiles/32.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: transparent;
    }
      
    .tile.tile-64 .tile-inner {
      background-image: url('/games/cupcake-2048/assets/images/tiles/64.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: transparent;
    }
      
    .tile.tile-128 .tile-inner {
      background-image: url('/games/cupcake-2048/assets/images/tiles/128.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: transparent;
    }
      
    .tile.tile-256 .tile-inner {
      background-image: url('/games/cupcake-2048/assets/images/tiles/256.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: transparent;
    }
      
    .tile.tile-512 .tile-inner {
      background-image: url('/games/cupcake-2048/assets/images/tiles/512.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: transparent;
    }
      
    .tile.tile-1024 .tile-inner {
      background-image: url('/games/cupcake-2048/assets/images/tiles/1024.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: transparent;
    }
      
    .tile.tile-2048 .tile-inner {
      background-image: url('/games/cupcake-2048/assets/images/tiles/2048.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: transparent;
    }
      
    .mini-tile-2 {
      background: #fff0f5;
      background-color: #fff0f5;
      background-image: url('/games/cupcake-2048/assets/images/tiles/2.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: #8b4513;
      font-size: 16px;
    }
      
    .mini-tile-4 {
      background: #ffe4e1;
      background-color: #ffe4e1;
      background-image: url('/games/cupcake-2048/assets/images/tiles/4.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: #8b4513;
      font-size: 16px;
    }
      
    .mini-tile-8 {
      background: #ffc0cb;
      background-color: #ffc0cb;
      background-image: url('/games/cupcake-2048/assets/images/tiles/8.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: #8b4513;
      font-size: 16px;
    }
      
    .mini-tile-16 {
      background: #ffb6c1;
      background-color: #ffb6c1;
      background-image: url('/games/cupcake-2048/assets/images/tiles/16.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: #8b4513;
      font-size: 16px;
    }
      
    .mini-tile-32 {
      background: #ff91a4;
      background-color: #ff91a4;
      background-image: url('/games/cupcake-2048/assets/images/tiles/32.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: #ffffff;
      font-size: 16px;
    }
      
    .mini-tile-64 {
      background: #ff69b4;
      background-color: #ff69b4;
      background-image: url('/games/cupcake-2048/assets/images/tiles/64.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: #ffffff;
      font-size: 16px;
    }
      
    .mini-tile-128 {
      background: #e6e6fa;
      background-color: #e6e6fa;
      background-image: url('/games/cupcake-2048/assets/images/tiles/128.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: #8b4513;
      font-size: 14px;
    }
      
    .mini-tile-256 {
      background: #dda0dd;
      background-color: #dda0dd;
      background-image: url('/games/cupcake-2048/assets/images/tiles/256.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: #ffffff;
      font-size: 14px;
    }
      
    .mini-tile-512 {
      background: #9370db;
      background-color: #9370db;
      background-image: url('/games/cupcake-2048/assets/images/tiles/512.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: #ffffff;
      font-size: 14px;
    }
      
    .mini-tile-1024 {
      background: #ffd700;
      background-color: #ffd700;
      background-image: url('/games/cupcake-2048/assets/images/tiles/1024.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: #8b4513;
      font-size: 12px;
    }
      
    .mini-tile-2048 {
      background: #ffb347;
      background-color: #ffb347;
      background-image: url('/games/cupcake-2048/assets/images/tiles/2048.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      color: #ffffff;
      font-size: 12px;
    }
      
/* 游戏组件样式 - 主题配置 */
html body[data-theme="cupcake-2048"] {
  --text-color: #8b4513;
  --guide-text: #8b4513;
  --button-bg: #dda0dd;
  color: #8b4513;
}

.restart-button, .keep-playing-button, .retry-button {
  background: #dda0dd !important;
  color: #ffffff !important;
}

.important, .game-explanation .important {
  color: #d2691e;
}

.game-container .game-message p,
.game-container .game-message.game-won p {
  color: #d2691e !important;
}

.grid-cell {
  background: rgba(255, 245, 250, 0.6);
}

.tile {
  /* 移除背景色，避免在DOM操作时显示错误的背景色 */
  border-radius: 3px;
}

.tile-inner {
  color: #8b4513;
}
    

/* 数字方块颜色样式 */
.tile.tile-2 .tile-inner {
  background: #fff0f5 !important;
  background-color: #fff0f5 !important;
  color: #8b4513 !important;
  opacity: 1 !important;
}
.tile.tile-4 .tile-inner {
  background: #ffe4e1 !important;
  background-color: #ffe4e1 !important;
  color: #8b4513 !important;
  opacity: 1 !important;
}
.tile.tile-8 .tile-inner {
  background: #ffc0cb !important;
  background-color: #ffc0cb !important;
  color: #8b4513 !important;
  opacity: 1 !important;
}
.tile.tile-16 .tile-inner {
  background: #ffb6c1 !important;
  background-color: #ffb6c1 !important;
  color: #8b4513 !important;
  opacity: 1 !important;
}
.tile.tile-32 .tile-inner {
  background: #ff91a4 !important;
  background-color: #ff91a4 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}
.tile.tile-64 .tile-inner {
  background: #ff69b4 !important;
  background-color: #ff69b4 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}
.tile.tile-128 .tile-inner {
  background: #e6e6fa !important;
  background-color: #e6e6fa !important;
  color: #8b4513 !important;
  opacity: 1 !important;
}
.tile.tile-256 .tile-inner {
  background: #dda0dd !important;
  background-color: #dda0dd !important;
  color: #ffffff !important;
  opacity: 1 !important;
}
.tile.tile-512 .tile-inner {
  background: #9370db !important;
  background-color: #9370db !important;
  color: #ffffff !important;
  opacity: 1 !important;
}
.tile.tile-1024 .tile-inner {
  background: #ffd700 !important;
  background-color: #ffd700 !important;
  color: #8b4513 !important;
  opacity: 1 !important;
}
.tile.tile-2048 .tile-inner {
  background: #ffb347 !important;
  background-color: #ffb347 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}
/* 游戏指南和更多主题区域的背景色 */
.tile-guide,
.more-themes {
  background: rgba(255, 182, 193, 0.15) !important;
}

.game-intro {
  color: #8b4513;
}

.game-explanation {
  color: #8b4513;
}

/* 游戏说明相关颜色 */
.tile-description {
  color: #8b4513;
}

.tile-description strong {
  color: #d2691e;
}

.ultimate-goal {
  color: #8b4513;
}
    
    @keyframes themeFloat {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
    }

    @keyframes themePulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(1.1); }
    }

    @keyframes themeSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    
/* 终极合并结果(2048)的突出显示 */
.mini-tile-2048.merge-result {
  transform: scale(1.05) !important;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4), 0 0 8px rgba(255, 215, 0, 0.3) !important;
  border: 1px solid #FFD700 !important;
}

/* 终极合并结果的小星星也要更突出 */
.mini-tile-2048.merge-result::before,
.mini-tile-2048.merge-result::after {
  font-size: 16px !important;
  /* animation: sparkle-ultimate 2s ease-in-out infinite !important; */ /* 暂时注释掉小星星动画 */
  filter: drop-shadow(0 0 5px #FFD700) !important;
}

@keyframes sparkle-ultimate {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1) rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: scale(1.3) rotate(90deg);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1) rotate(180deg);
  }
  75% {
    opacity: 1;
    transform: scale(1.2) rotate(270deg);
  }
}

/* 简化的小星星样式 - 确保在图片上方显示 */
.mini-tile.merge-result::after {
  content: '✨';
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 14px;
  /* animation: sparkle 1.5s ease-in-out infinite; */ /* 暂时注释掉小星星动画 */
  z-index: 1000;
  pointer-events: none; /* 确保不影响鼠标事件 */
  background: none;
}

/* 图片主题下的小星星要更明显 */
[data-theme="cupcake-2048"] .mini-tile.merge-result::after {
  color: #FFD700;
  text-shadow: 0 0 5px rgba(255, 215, 0, 1);
  font-weight: bold;
  background: none;
  background-image: none !important;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

/* 终极2048合并结果的特殊小星星 */
[data-theme="cupcake-2048"] .mini-tile-2048.merge-result::after {
  font-size: 14px;
  color: #FFD700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 1);
  font-weight: bold;
  /* animation: sparkle-ultimate 2s ease-in-out infinite; */ /* 暂时注释掉小星星动画 */
  width: 20px;
  height: 20px;
}

@keyframes sparkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* 分数增加动画文字颜色 */
[data-theme="cupcake-2048"] .score-addition {
  color: rgba(139, 69, 19, 0.7) !important;
}