/* ============================
   全站基本設定
   ============================ */
body {
  margin: 0; /* 拿掉預設邊距，避免頁面四周有白邊 */
  font-family: "Microsoft JhengHei", Arial, sans-serif; /* 使用微軟正黑體 + 備援字型 */
  background: #f5f5f5; /* 淺灰色背景，讓白色卡片更顯眼 */
  color: #333; /* 全站預設文字顏色 */
  text-align: center; /* 讓 header 內文字預設置中（主要影響 h1、p） */
}

/* ============================
   頁首（上方黑底標題區）
   ============================ */
header {
  padding: 2rem;      /* 上下左右間距 2rem，讓內容不要貼邊 */
  background: #222;   /* 深色背景 */
  color: #fff;        /* 文字改為白色 */
}

h1 {
  margin: 0 0 0.5rem; /* 上左右 0，下方 0.5rem，讓 h1 與底下文字有間距 */
}

p {
  margin: 0;              /* 拿掉預設 margin，方便自己控制間距 */
  font-size: 1.1rem;      /* 略大一點的文字大小 */
  opacity: 0.8;           /* 稍微降低透明度，看起來比較柔和 */
}

/* ============================
   遊戲卡片的外層排版（grid 排版）
   ============================ */
.game-grid {
  display: grid; /* 使用 CSS Grid 來排卡片 */
  /* 
    repeat(auto-fill, minmax(150px, 1fr)) 的意思是：
    - 每個格子最小寬度 150px
    - 最大可以撐到 1fr（等分）
    - auto-fill 會依照螢幕寬度自動塞滿可容納的卡片數
  */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;      /* 卡片之間的間距 */
  padding: 2rem;  /* 整個區塊與螢幕內邊距 */
}

/* ============================
   遊戲卡片本體樣式
   ============================ */
.game-card {
  /* 用 flex 來控制卡片內文字的置中與排版 */
  display: flex;
  flex-direction: column;  /* ⭐ 垂直排列（上下一行），確保「問卷 4 / 關節問題」各在一行 */
  justify-content: center; /* ⭐ 垂直方向置中整個內容 */
  align-items: center;     /* ⭐ 水平方向置中 */

  padding: 1rem;   /* 內距，避免文字貼卡片邊緣 */
  height: 100px;   /* 卡片固定高度，兩行文字看起來比較舒適；可依需求調整 */

  background: #cce5ff;                       /* 白色背景，搭配灰底形成卡片感 */
  border-radius: 12px;                   /* 圓角卡片 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 淺陰影，讓卡片浮起來的感覺 */

  text-decoration: none; /* 移除超連結預設底線 */
  color: #333;           /* 文字顏色 */
  font-weight: bold;     /* 文字加粗，讓標題更明顯 */
  line-height: 1.4;      /* ⭐ 兩行文字之間的行距，看起來不會擠在一起 */

  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  /* 上面這行讓 hover 動畫更順：位移、陰影、背景色都會有 0.2 秒過渡 */
}

/* 卡片滑過去時的效果（hover） */
.game-card:hover {
  transform: translateY(-5px);                   /* 整張卡片往上浮一點 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);        /* 陰影變深，營造浮起來的感覺 */
  background: #337ab7;                           /* 背景變成淡藍色，提供互動回饋 */
}

/* 
  如果你之後在 .game-card 裡想用 <span> 或 <div> 做更多行，
  這裡不用特別再設定 display:block，
  因為 flex-direction: column 本來就會讓每個子元素自動上下排列。
*/

/* ============================
   標題旁的小圖示樣式
   ============================ */
.title-logo {
  height: 50px;        /* 固定高度 50px，寬度自動等比例縮放 */
  width: auto;
  object-fit: contain; /* 圖片塞進高度時保持完整比例，不裁切 */
  vertical-align: middle; /* 與文字垂直置中（對 inline 情境有幫助） */
}

/* 標題區：左右有 logo，中間是文字，用 flex 置中排版 */
.header-top {
  display: flex;
  align-items: center;      /* 垂直置中 logo 和標題文字 */
  gap: 10px;                /* 圖片與文字之間的距離 */
  justify-content: center;  /* 整組內容在 header 裡水平置中 */
}

/* ============================
   商品頁卡片本體樣式
   ============================ */
.products-card {
  /* 用 flex 來控制卡片內文字的置中與排版 */
  display: flex;
  flex-direction: column;  /* ⭐ 垂直排列（上下一行），確保「問卷 4 / 關節問題」各在一行 */
  justify-content: center; /* ⭐ 垂直方向置中整個內容 */
  align-items: center;     /* ⭐ 水平方向置中 */

  padding: 1rem;   /* 內距，避免文字貼卡片邊緣 */
  height: 100px;   /* 卡片固定高度，兩行文字看起來比較舒適；可依需求調整 */

  background: #f7d774;                       /* 淺黃背景，搭配深金形成卡片感 */
  border-radius: 12px;                   /* 圓角卡片 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 淺陰影，讓卡片浮起來的感覺 */

  text-decoration: none; /* 移除超連結預設底線 */
  color: #333;           /* 文字顏色 */
  font-weight: bold;     /* 文字加粗，讓標題更明顯 */
  line-height: 1.4;      /* ⭐ 兩行文字之間的行距，看起來不會擠在一起 */

  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  /* 上面這行讓 hover 動畫更順：位移、陰影、背景色都會有 0.2 秒過渡 */
}

/* 卡片滑過去時的效果（hover） */
.products-card:hover {
  transform: translateY(-5px);                   /* 整張卡片往上浮一點 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);        /* 陰影變深，營造浮起來的感覺 */
  background: #cfa51f;                           /* 背景變成深金色，提供互動回饋 */
}