Day 15卡片/遊戲區切版：建立卡片外觀、按鈕樣式

今天的目標是針對遊戲的核心互動區塊進行詳細切版，特別是卡片的視覺設計與按鈕的樣式調整。這個步驟將讓網站的主要遊戲介面不再只是基本區塊，而是更有立體感、互動性與品牌一致性。卡片在翻牌遊戲、迷宮提示、跑酷道具顯示中，都是玩家最直接接觸的元素；按鈕則是引導操作的關鍵，例如「開始遊戲」、「再玩一次」或「返回首頁」。今天的工作不僅是套用顏色和字體，更要透過CSS 排版、陰影、動畫，為遊戲區打造可玩性與吸引力。

一、規劃卡片與遊戲區架構
在 HTML 中，遊戲區應具有清晰的容器結構，以便未來加入動態功能：

<section class="game-area">
  <div class="card-grid">
    <div class="card">
      <div class="card-front">?</div>
      <div class="card-back">🍀</div>
    </div>
    <!-- 更多卡片 -->
  </div>
  <div class="game-controls">
    <button class="btn-start">開始遊戲</button>
    <button class="btn-restart">重新開始</button>
  </div>
</section>

.game-area：整個遊戲主體容器。
.card-grid：卡片的網格排列區域，方便之後用 CSS Grid 或 Flexbox 排版。
.card：單張卡片，內含「正面」與「背面」，為翻牌或互動預留結構。

二、卡片外觀設計
卡片是遊戲的核心，需要具備吸引力又便於操作。
尺寸與比例：保持正方形或接近 4:5 的長寬比，確保在手機與桌面上都易於點擊。
基礎樣式：

.card {
  width: 120px;
  height: 160px;
  perspective: 1000px; /* 為翻轉動畫預留3D效果 */
  margin: 10px;
  position: relative;
}
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}
.card-front {
  background-color: var(--main-color);
  color: #fff;
}
.card-back {
  background-color: #fff;
  color: var(--main-color);
  transform: rotateY(180deg);
}

使用 perspective 和 backface-visibility 來支援翻轉效果。
利用 border-radius 讓卡片邊緣圓潤，符合遊戲輕鬆可愛的風格。
font-size: 2rem 讓符號、文字或圖案清晰可見。

三、卡片互動效果
即使今天還未加入 JavaScript，也可以用純 CSS 模擬翻轉：

.card:hover .card-front {
  transform: rotateY(180deg);
}
.card:hover .card-back {
  transform: rotateY(0deg);
}

在未點擊的情況下，滑鼠移入即可體驗翻轉動畫，增加臨場感。
之後可用 JS 在點擊事件中控制翻牌狀態。

四、遊戲區排版
遊戲卡片通常以網格(Grid)排列，方便動態增加關卡或卡片數：

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  justify-items: center;
  padding: 20px;
}

auto-fill 與 minmax 讓卡片可自動換行，適應桌機、平板與手機。
gap 設定卡片間距，避免玩家誤觸。

五、按鈕樣式設計
遊戲操作按鈕需醒目且易點擊：

button {
  padding: 12px 24px;
  margin: 10px;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-start {
  background-color: var(--main-color);
  color: #fff;
}
.btn-start:hover {
  background-color: #e79aa7;
  transform: scale(1.05);
}
.btn-restart {
  background-color: var(--accent-color);
  color: #333;
}
.btn-restart:hover {
  background-color: #ffd580;
}

主按鈕使用主色，確保玩家一眼就能找到「開始遊戲」。
次按鈕用輔助色，區分功能但仍維持設計統一。
transform: scale(1.05) 提供微小的放大效果，提升互動回饋。

六、響應式細節
確保卡片與按鈕在不同裝置下都清晰好操作：

@media (max-width: 767px) {
  .card { width: 90px; height: 120px; }
  button { padding: 10px 18px; font-size: 1rem; }
}

手機版縮小卡片並增加按鈕間距，避免點擊困難。

今日成果

1. 完成遊戲卡片切版：包含卡片正反面設計、圓角、陰影與翻轉效果，具備完整視覺與互動雛形。
2. 設定遊戲區網格排版：卡片可依螢幕大小自動排列，為 RWD 打下基礎。
3. 建立按鈕樣式：主按鈕與輔助按鈕風格一致，並加入滑過動畫提升操作手感。
   經過這一步，網站的核心遊戲區域已經從概念走向成品，玩家進入頁面時能立即感受到遊戲的主題與風格，也為之後加入 JavaScript 的邏輯互動奠定堅實基礎。