/* ===============================
   基本頁面設定
   =============================== */

/*
   html、body 是整個 3D 頁面的最外層。
   background 設為白色，避免 iframe 左右出現黑邊。
*/
html,
body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: "Noto Sans TC", Arial, sans-serif;
  overflow: hidden;
}


/* ===============================
   3D 展示外層容器
   =============================== */

/*
   #gd-stack-viewer 是整個生肖互動頁的主要容器。

   width: min(100vw, 793px);
   代表小螢幕時吃滿螢幕寬度，
   大螢幕時最大寬度限制在 793px。

   aspect-ratio: 793 / 1080;
   維持背景圖原始直式比例，不變形。
*/
#gd-stack-viewer {
  position: relative;
  width: min(100vw, 793px);
  aspect-ratio: 793 / 1080;
  margin: 0 auto;
  overflow: hidden;

  background-color: #fff;
  background-image: url("./zodiac-bg.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}


/* ===============================
   Three.js Canvas
   =============================== */

/*
   #gdCanvas 是 Three.js 3D 模型顯示的畫布。
   它會疊在背景圖上方。
*/
#gdCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;

  /*
     保持透明，讓底下的 zodiac-bg.webp 背景圖可以顯示。
  */
  background: transparent;

  /*
     避免手機拖曳 3D 模型時，
     觸發頁面滑動或縮放。
  */
  touch-action: none;
}


/* ===============================
   工具列：桌機版
   =============================== */

/*
   .gd-toolbar 是左上角的「重設位置」與說明文字區塊。
   桌機版維持在左上角。
*/
.gd-toolbar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  bottom: auto;
  z-index: 10;

  display: flex;
  gap: 10px;
  align-items: center;

  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);

  font-size: 13px;
  color: #333;
}


/* ===============================
   工具列按鈕
   =============================== */

.gd-toolbar button {
  border: 0;
  background: #222;
  color: #fff;
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.gd-toolbar button:hover {
  background: #555;
}


/* ===============================
   手機版工具列：移到下方置中
   =============================== */

/*
   手機版時，工具列從左上角移到畫面下方置中，
   避免遮住上方生肖徽章。
*/
@media (max-width: 768px) {
  .gd-toolbar {
    top: auto;
    left: 50%;
    right: auto;
    bottom: 14px;

    transform: translateX(-50%);

    width: auto;
    max-width: calc(100% - 32px);

    justify-content: center;
    gap: 8px;

    padding: 7px 10px;
    font-size: 12px;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  }

  .gd-toolbar button {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 999px;
  }
}


/* ===============================
   小手機微調
   =============================== */

/*
   480px 以下再縮小一點，
   避免工具列超出畫面。
*/
@media (max-width: 480px) {
  .gd-toolbar {
    bottom: 12px;
    max-width: calc(100% - 24px);
    padding: 6px 8px;
    gap: 6px;
    font-size: 11px;
  }

  .gd-toolbar button {
    padding: 6px 9px;
    font-size: 11px;
  }
}


/* ===============================
   很窄手機處理
   =============================== */

/*
   如果手機寬度太窄，文字可能擠在一起，
   這裡讓說明文字可換行，但整體仍置中。
*/
@media (max-width: 360px) {
  .gd-toolbar {
    max-width: calc(100% - 20px);
    white-space: normal;
    text-align: center;
  }

  .gd-toolbar button {
    flex-shrink: 0;
  }
}