html {
  background-color: #ffd9e0; /* 淡粉紅 */
}
/* ---------- BODY ---------- */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  overflow: hidden;      /* 防止卷軸 */
  background-color: #ffd9e0; /* 淡粉紅 */
}

/* ---------- 分割背景 ---------- */
.split-bg {
  display: flex;
  width: 100%;
  height: 100vh;  /* 佔滿整個視窗高度 */
  margin: 0;
  padding: 0;
}

/* ---------- 左區塊 ---------- */
.left-block {
  flex: 1;
  background-color: #ffd9e0; /* 淡粉紅 */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* 垂直置中 */
  align-items: center;       /* 水平置中 */
}

/* ---------- 右區塊 ---------- */
.right-block {
  flex: 1;
  background-color: hsl(209, 100%, 90%); /* 淡藍色 */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* 垂直置中 */
  align-items: center;       /* 水平置中 */
}

/* ---------- 左右區塊文字 ---------- */
.text-left {
  color: rgba(255, 253, 142, 0.8);
  font-size: 150px;  
  font-weight: bold;
  margin-bottom: 10px;
  text-shadow:
    0px 3px 10px rgba(0,0,0,0.1),   /* 柔和黑色陰影 */
    0 0 8px rgba(255,255,255,0.5); /* 白色光暈，讓字更亮 */
}

.text-right {
  color: rgba(255, 255, 255, 0.8);
  font-size: 150px;  
  font-weight: bold;
  margin-bottom: 10px;
  text-shadow:
    0px 3px 10px rgba(0,0,0,0.1),   /* 柔和黑色陰影 */
    0 0 8px rgba(255,255,255,0.5); /* 白色光暈，讓字更亮 */
}

.text-lbottom {
  color: rgba(255, 253, 142, 0.6);
  font-size: 70px;
  margin-bottom: 30px;
  text-shadow:
    0px 3px 10px rgba(0,0,0,0.1),   /* 柔和黑色陰影 */
    0 0 8px rgba(255,255,255,0.5); /* 白色光暈，讓字更亮 */
}

.text-rbottom {
  color: rgba(255, 255, 255, 0.6);
  font-size: 70px;
  margin-bottom: 30px;
  text-shadow:
    0px 3px 10px rgba(0,0,0,0.1),   /* 柔和黑色陰影 */
    0 0 8px rgba(255,255,255,0.5); /* 白色光暈，讓字更亮 */
}

/* 應用動畫 */
/* 左邊 機會 / Chance */
.text-left {
  animation: yellowToWhiteBig 2s infinite;
}
.text-lbottom {
  animation: yellowToWhiteSmall 2s infinite;
}

/* 右邊 命運 / Fate */
.text-right {
  animation: whiteToYellowBig 2s infinite;
}
.text-rbottom {
  animation: whiteToYellowSmall 2s infinite;
}

/* ---------- 動態動畫 ---------- */
/* 大字：0.8 */
@keyframes yellowToWhiteBig {
  0% { color: rgba(255, 253, 142, 0.8); }
  50% { color: rgba(255, 255, 255, 0.8); }
  100% { color: rgba(255, 253, 142, 0.8); }
}

@keyframes whiteToYellowBig {
  0% { color: rgba(255, 255, 255, 0.8); }
  50% { color: rgba(255, 253, 142, 0.8); }
  100% { color: rgba(255, 255, 255, 0.8); }
}

/* 小字：0.6 */
@keyframes yellowToWhiteSmall {
  0% { color: rgba(255, 253, 142, 0.6); }
  50% { color: rgba(255, 255, 255, 0.6); }
  100% { color: rgba(255, 253, 142, 0.6); }
}

@keyframes whiteToYellowSmall {
  0% { color: rgba(255, 255, 255, 0.6); }
  50% { color: rgba(255, 253, 142, 0.6); }
  100% { color: rgba(255, 255, 255, 0.6); }
}


/* ---------- 遊戲容器置中 ---------- */
.game-container {
  position: absolute;       /* 絕對置中於畫面 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 550px; /* 固定大小 */
}

/* ---------- 圓盤容器 ---------- */
.wheel-container {
  position: relative;
  width: 100%;
  height: 550px; /* 固定大小 */
  margin-bottom: 20px;
}

#wheel {
  box-shadow: 0 10px 20px 10px rgba(0, 0, 0, 0.1); /* 下方陰影 */
  border-radius: 50%;  
  display: block;
  margin: 8px auto;
  border: 10px solid rgba(255, 255, 255, 0.1); /* 半透明邊框 */
  box-sizing: border-box;
  /* background: radial-gradient(circle, #fff 0%, #ccc 100%); */
  animation: wheelFlash 4s infinite; /* 閃兩下 → 停3秒 */
}

@keyframes wheelFlash {
  0%, 10%   { filter: brightness(1.2); }  /* 第一次閃亮 */
  5%, 15%   { filter: brightness(1);   }  /* 回到正常 */
  20%, 30%  { filter: brightness(1); }  /* 第二次閃亮 */
  100%      { filter: brightness(1);   }  /* 停留原本狀態 */
}





/* ---------- Canvas ---------- */
canvas {
  width: 100%;
  height: 100%;
  display: block;
  margin-top: 10px;
}

/* ---------- 紅色三角形指針 ---------- */
.pointer {
  position: absolute;
  top: 100%;         
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 22px solid #F74345; /* 尖端朝上 */
  filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.4)); 
  z-index: 10;
  margin-top: 1px;
}

/* ---------- 箭頭圖片 ---------- */
#arrow {
  width: 240px;
  height: auto;
  cursor: pointer;
  display: block;
}

/* ---------- 結果文字 ---------- */
.result {
  display: inline-block; /* 讓 scale 不影響 layout */
  font-size: 2.5rem;      
  font-weight: bold;
  text-align: center;
  word-break: break-word;
  font-family: "Arial", "sans-serif", monospace; /* monospace 確保數字寬度一致 */ 
  margin: 1em 0 0;
  color: rgb(0, 110, 255);
  width: auto;                  /* 改成 auto，不要固定 100% */
  min-width: 3rem;              /* 適度最小寬度 */
  height: 3rem;                 
  line-height: 3rem;
  transform-origin: center center;  /* 放大基準固定 */
}

/* ---------- 結果文字動畫 ---------- */
.result.flash {
  animation: glowTwice 1s ease-in-out 2; /* 播放兩次 */
  transform-origin: center center; /* 固定放大中心 */
}

@keyframes glowTwice {
  0% {
    text-shadow: 0 0 0px rgba(0, 110, 255, 0);
  }
  30% {
    text-shadow: 0 0 20px rgb(255, 255, 255),
                 0 0 50px rgba(255, 244, 87);
    color: rgb(250, 118, 255);             
  }
  60% {
    text-shadow: 0 0 0px rgba(0, 110, 255, 0);
    transform: scale(1.2); opacity: 1;
  }
  100% {
    text-shadow: 0 0 0px rgba(0, 110, 255, 0);
  }
}


/* ---------- 漢堡選單 ---------- */
.hamburger-menu {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
}

.hamburger-icon {
  font-size: 40px;
  cursor: pointer;
  border-radius: 8px;
  padding: 6px 10px;
  /* background: rgba(0,0,0,0.1); */
  user-select: none;
  transition: transform 0.3s ease;
  color: #555;
  position: fixed;
  top: 0;
}

.hamburger-icon.active {
  transform: rotate(-90deg); /* 點擊後小轉動，視覺上更有感 */
}

.menu-links {
  display: none;
  position: absolute;
  top: 30px;
  /* right: 0; */
  background: rgba(19, 182, 166, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  overflow: hidden;
  min-width: 150px;
}

.menu-links a {
  display: block;
  padding: 10px 16px;
  font-weight: 500;
  text-decoration: none;
  color: #FFFFFF;
  font-size: 18px;
  transition: background 0.2s;
  text-align: center;
}

.menu-links a:hover {
  background: #109c8e;
}

.menu-links.show {
  display: block;
}


@media (max-width: 768px) {
  .text-left,
  .text-right,
  .text-lbottom,
  .text-rbottom {
    display: none;
  }
  .hamburger-icon {
    padding: 0 15px;
    left: 0;
    /* top: 0; */
  }
  .menu-links a {
    padding: 5px 16px;
  }
}

@media (max-width: 600px) {
  .game-container {
    width: 95%;  /* 隨版面縮小 */
  }

  .wheel-container {
    height: auto; /* 高度自動，保持比例 */
    padding-top: 30px;
  }

  canvas {
    width: 100%;
    height: auto; /* Canvas 隨容器縮放 */
  }

  #arrow {
    width: 55%;   /* 箭頭也縮小 */
  }

  .result {
    font-size: 2rem;
  }
}