/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

                body {
                    margin: 0px; /* 只在頂部添加外邊距 */
                    padding: 20px;
                    /*height: 100vh; /* 確保 body 佔滿整個視窗高度 */
                    background-image: url("");
                    background-repeat: no-repeat;
                    background-color: black; /* 設定背景顏色 */
                    background-size: 90%; /* 填滿整個背景區域 */
                    background-position: top center; /* 從頂部開始，水平居中 */
                    display: flex;
                    flex-direction: column;
                }               
                @media (max-width: 1000px) { /* 手機螢幕寬度通常小於 768px 針對手機的樣式調整 */
                    body {
                    margin: 0;
                    height: 100vh; /* 確保 body 佔滿整個視窗高度 */    
                    background-repeat: no-repeat;
                    background-color: black; /* 設定背景顏色 */
                    background-size: contain; /* 填滿整個背景區域 */
                    background-position: center; /* 從頂部開始，水平居中 */
                    display: flex;
                    flex-direction: column;
                    }
                }
                
                #controls {
                    text-align: center;
                    padding: 5px; /* 移除或調整 padding */
                    margin: 5px; /* 移除或調整 margin */
                    /*background-color: rgba(255, 255, 255, 0.25); /* 白色半透明，alpha 值為 0.2 */
                }
                button {
                    padding: 10px 20px; /* 更大的按鈕 */
                    font-size: 20px; /* 更大的字體 */
                    margin: 5px;
                    border: none;
                    border-radius: 10px; /* 圓角 */
                    background-color: #FF4500; /* 番茄紅 */
                    color: white; /**/
                    cursor: pointer;
                    transition: background-color 0.3s; /* 平滑的背景顏色過渡 */
                    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 增加陰影 */
                }
                button:hover {
                    background-color: #45a049; /* 深綠色背景 */
                    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.4); /* 更強的陰影 */
                }
                
                
                #deck-container {
                  background-color: transparent;
                  padding: 10px;
                  overflow-x: hidden; /* 隱藏水平方向溢出的內容，不顯示捲軸 */
                  white-space: normal; /* 允許換行 */
                  display: flex; /* 使用 flexbox 佈局 */
                  flex-wrap: wrap; /* 允許 flex 項目換行 */
                  justify-content: flex-start; /* 靠左對齊，可根據需求調整 */
                  min-height: 80vh; /* 確保 body 至少佔據整個 viewport 的高度 */
                  /*flex-wrap: wrap; /* Allow cards to wrap to the next line */
                }
                .card {
                    width: 125px; /* 更小的卡牌寬度 */
                    height: 200px; /* 更小的卡牌高度 */
                    margin: 5px;
                    display: inline-block;/* 使卡牌橫向排列 */
                    cursor: pointer;
                    background-size: cover;/* 讓圖片填滿容器 */                    
                    background-position: center; /* 圖片居中 */
                    background-repeat: no-repeat;
                    opacity: 0.5;
                    box-shadow: none; 
                }
                .card:hover {
                    transform: scale(1.5) translateY(50px); /* 稍微縮小放大比例 */
                    opacity: 1;
                    z-index: 1;
                    box-shadow: none; 
                }
                @media (max-width: 1000px) { /* 手機螢幕寬度通常小於 768px 針對手機的樣式調整 */
                  .card {
                    width: 80px; /* 更小的卡牌寬度 */
                    height: 120px; /* 更小的卡牌高度 */
                    margin: 5px;
                    display: inline-block;/* 使卡牌橫向排列 */
                    cursor: pointer;
                    background-size: cover;/* 讓圖片填滿容器 */                    
                    background-position: center; /* 圖片居中 */
                    background-repeat: no-repeat;
                    opacity: 0.4;
                    box-shadow: none; 
                  }
                  .card:hover {
                    transform: scale(1.25) translateY(0px); /* 稍微縮小放大比例 */
                    opacity: 1;
                    z-index: 1;
                    box-shadow: none; 
                  }
                }
                .selected {
                    border: 2px solid #fa1951;
                    box-shadow: 0 0 3px rgba(0, 0, 255, 0.2);
                }