@font-face {
  font-family: 'LXGW Wen Kai TC'; /* 您希望在 CSS 中使用的字體名稱 */
  src: url('fonts/LXGWWenKaiTC-Regular.woff') format('woff');   /* .woff 格式 */
  font-weight: normal; /* 字體粗細，可以根據您的字體文件調整 */
  font-style: normal;  /* 字體樣式，例如斜體等 */
}

/* 頁面佈局 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f8f9fa;
  font-family: Arial, sans-serif;
}

/* 轉盤容器 */
.wheel-container {
  position: relative;
  width: min(70vw, 250px);
  height: min(70vw, 250px);
}

/* 外圈轉盤 */
.outer-wheel {
  position: absolute;
  width: 150%; /* 變大 */
  height: 150%; /* 變大 */
  border-radius: 50%;
  background-color: white;
  border: 3px solid black;
  left: -25%; /* 調整位置使其居中 */
  top: -25%; /* 調整位置使其居中 */
  /* 確保外圈在最下方 */
  z-index: 1;
}

/* 中圈轉盤 */
.middle-wheel {
  position: absolute;
  width: 115%; /* 縮小中間圈，您可以調整這個數值 */
  height: 115%; /* 縮小中間圈，您可以調整這個數值 */
  border-radius: 50%;
  background-color: white;
  border: 3px solid black;
  left: -7.5%; /* 調整位置使其居中，計算方式 (100% - width) / 2 */
  top: -7.5%; /* 調整位置使其居中，計算方式 (100% - height) / 2 */
  /* 確保中間圈在外圈之上，內圈之下 */
  z-index: 2;
}

/* 內圈轉盤 */
.inner-wheel {
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background-color: white;
  border: 3px solid black;
  left: 10%;
  top: 10%;
  /* 確保內圈在中圈之上 */
  z-index: 3;
}

/* 放射線（分隔線） */
.line {
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: black;
  left: 50%;
  top: 0;
  transform-origin: center;
}

/* 格子樣式 */
.segment {
  position: absolute;
  /* 將定位設在轉盤中心 */
  left: 50%;
  top: 50%;
  /* 讓每個扇區以其左側做旋轉基準 */
  transform-origin: 0 0;
  /* 文字樣式 */
  font-size: calc(0.8em);
  font-weight: 600;
  color: black;
  text-align: center;
  font-family: 'LXGW Wen Kai TC', sans-serif; /* 使用您在 @font-face 中定義的字體名稱 */
  width: 20%; /* 爲 segment 設定一個百分比寬度，您可以調整這個數值 */
  /* 若有需要，可加入 clip-path 設定扇形效果 */
  /* clip-path: polygon(35% 35%, 100% 0, 100% 100%, 35% 100%); */
}