/* =========================================================
   AIGEM 動漫創作島 － 樣式表
   顏色都集中在最上面的「變數」，想換色只要改這裡
   ========================================================= */

:root {
  --coral: #db6a41;   /* 主色：珊瑚橘 */
  --ink: #211d1d;     /* 文字：墨黑 */
  --cream: #fff8f4;   /* 卡片底色：奶油白 */
  --yellow: #fcea8b;  /* 強調：奶油黃 */
  --stone: #c5b5a7;   /* 次要文字：石頭灰 */
  --line: #eadfd3;    /* 分隔線 */
  --shadow: 0 2px 8px #4a2a1414, 0 12px 32px #4a2a141f; /* 柔和陰影 */
  --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

/* ---------- 基本設定 ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;           /* 3D 畫面滿版，不要出現捲軸 */
  font-family: var(--font);
  color: var(--ink);
  /* 白天的天空：由中間往外的放射漸層 */
  background: radial-gradient(ellipse at 50% 30%, #fffdf9 0%, #f6ebe0 55%, #edddcf 100%);
  transition: background 1s;
}

/* 夜晚的天空（script.js 會在 body 加上 night 這個 class） */
body.night {
  background: radial-gradient(ellipse at 50% 30%, #3f4f80 0%, #26365f 55%, #1e2c58 100%);
}

button { font-family: inherit; color: inherit; cursor: pointer; }

/* 鍵盤操作時的外框，方便看出目前選到哪個按鈕 */
button:focus-visible, input:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}

.hidden { display: none !important; }

/* 小小的英文眉標 */
.eyebrow {
  font: 700 10px ui-monospace, Consolas, monospace;
  letter-spacing: 2px;
  color: var(--coral);
}

/* ---------- 3D 畫面 ---------- */
#scene {
  position: fixed;
  inset: 0;
}

/* ---------- 載入畫面 ---------- */
#loading {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--cream);
  transition: opacity .6s;
}
#loading.fade { opacity: 0; pointer-events: none; }
.loading-title { font-size: 32px; font-weight: 900; }
.loading-text { color: #8a7a6a; }
.loading-text.error { color: #b3261e; max-width: 420px; text-align: center; line-height: 1.7; }

/* ---------- 毛玻璃面板（品牌卡、清單、工具列共用） ---------- */
.brand, .list, .hud, .top-tools, .caption {
  background: #fff8f4d9;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

/* ---------- 左上：品牌卡 ---------- */
.brand {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 10;
  padding: 14px 20px;
  border-radius: 18px;
  pointer-events: none;   /* 不擋住滑鼠點 3D 畫面 */
}
.brand h1 { margin: 4px 0 2px; font-size: 22px; font-weight: 900; }
.brand p { margin: 0; font-size: 13px; color: #6b5d50; }

/* ---------- 右上：功能按鈕 ---------- */
.top-tools {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10;
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: 16px;
}

/* 工具按鈕：圖示在上、文字在下 */
.tool-btn, .hud-btn {
  min-width: 56px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 18px;
}
.tool-btn span, .hud-btn span { font-size: 11px; font-weight: 700; }
.tool-btn:hover, .hud-btn:hover { background: var(--yellow); }
.tool-btn.on, .hud-btn.on { background: var(--ink); color: var(--cream); }

/* ---------- 下方：工具列 ---------- */
.hud {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
}
.hud-btn { border-radius: 999px; min-width: 64px; }

/* ---------- 導覽字幕 ---------- */
.caption {
  position: fixed;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 20px;
  border-radius: 14px;
  text-align: center;
  line-height: 1.6;
}
.caption b { color: var(--coral); }

/* ---------- 關閉按鈕 ---------- */
.close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f1e6dc;
  font-size: 14px;
}
.close-btn:hover { background: var(--yellow); }

/* ---------- 左側：介紹卡片 ---------- */
.card {
  position: fixed;
  top: 128px;
  left: 16px;
  bottom: 96px;
  z-index: 20;
  width: 340px;
  overflow-y: auto;          /* 內容太多時可以捲動 */
  padding: 22px 22px 26px;
  border-radius: 22px;
  background: var(--cream);
  box-shadow: var(--shadow);
}
.card h2 { margin: 6px 40px 6px 0; font-size: 24px; line-height: 1.3; }
.card h3 { margin: 18px 0 8px; font-size: 14px; color: #6b5d50; }
.card p { margin: 0; line-height: 1.75; }
.card ul { margin: 0; padding-left: 20px; line-height: 1.8; }

/* 卡片頂端的大圖示 */
.card-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 30px;
  margin-bottom: 10px;
}

/* 細項清單（島卡裡面） */
.item-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  font-size: 15px;
}
.item-row:hover { background: var(--yellow); }
.item-num {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* 工具小標籤（全圓角 chip） */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px #4a2a1414;
  font-size: 13px;
}

/* 提示詞範例框 */
.prompt-box {
  position: relative;
  padding: 12px 14px 44px;
  border-radius: 12px;
  background: var(--ink);
  color: #f6eee6;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.copy-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  min-height: 30px;
  padding: 4px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

/* 作品圖片、影片 */
.card img {
  width: 100%;
  border-radius: 12px;
  display: block;
}
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compare figure { margin: 0; }
.compare figcaption { font-size: 12px; color: #8a7a6a; text-align: center; margin-top: 4px; }
.video-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-link { display: inline-block; margin-top: 6px; color: var(--coral); font-size: 13px; }

/* 外部連結的大按鈕（YouTube、Facebook） */
.link-btn {
  display: block;
  margin: 18px 0 6px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--coral);
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.link-btn:hover { background: var(--ink); }

/* 卡片底部：上一站／下一站 */
.card-nav { display: flex; gap: 8px; margin-top: 22px; }
.card-nav button, .back-btn, .primary-btn {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  background: #f1e6dc;
  font-size: 14px;
  font-weight: 700;
}
.card-nav button:hover, .back-btn:hover { background: var(--yellow); }
.back-btn { flex: none; min-height: 32px; padding: 0 12px; margin-bottom: 10px; font-size: 13px; }
.primary-btn { background: var(--coral); color: #fff; padding: 0 28px; }
.primary-btn:hover { background: var(--ink); }

/* ---------- 右側：流程清單 ---------- */
.list {
  position: fixed;
  top: 88px;
  right: 16px;
  bottom: 96px;
  z-index: 20;
  width: 318px;
  overflow-y: auto;
  padding: 20px;
  border-radius: 22px;
}
.list h2 { margin: 4px 0 12px; font-size: 20px; }
#search {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
  margin-bottom: 12px;
}
.list details {
  margin-bottom: 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px #4a2a1414;
}
.list summary {
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
}
.list details .item-row { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }

/* ---------- 3D 島名標籤 ---------- */
.island-label {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--cream);
  box-shadow: 0 2px 8px #4a2a1426;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .3s, background .3s;
}
.island-label b { color: var(--coral); margin-right: 4px; }
.island-label.active { background: var(--ink); color: var(--cream); }
.island-label.active b { color: var(--yellow); }
.island-label.dim { opacity: .45; }

/* 細項上方的 ①②③ 號碼 */
.item-pin {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 6px #4a2a1440;
  cursor: pointer;
}

/* ---------- 操作說明 ---------- */
.help {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #211d1d66;
}
.help-box {
  max-width: 420px;
  padding: 28px;
  border-radius: 22px;
  background: var(--cream);
  box-shadow: var(--shadow);
  text-align: center;
}
.help-box h2 { margin-top: 0; }
.help-box ol { text-align: left; line-height: 2; padding-left: 22px; }
.help-tip { color: #8a7a6a; font-size: 13px; }

/* =========================================================
   管理後台（網址加上 ?admin 才會出現）
   ========================================================= */
.admin {
  position: fixed;
  top: 88px;
  right: 16px;
  bottom: 16px;
  z-index: 25;
  width: 440px;
  overflow-y: auto;
  padding: 20px 20px 0;
  border-radius: 22px;
  background: var(--cream);
  box-shadow: var(--shadow);
}
.admin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.admin-head h2 { margin: 4px 0 10px; font-size: 20px; }
.admin-head-btns { display: flex; gap: 6px; }
.admin-small {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: #f1e6dc;
  font-size: 13px;
}
.admin-small:hover { background: var(--yellow); }

/* 島的分頁按鈕 01～08 */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; }
.admin-tab {
  min-width: 44px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  font-weight: 700;
}
.admin-tab:hover { background: var(--yellow); }
.admin-tab.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* 表單 */
.admin-form { margin-bottom: 14px; }
.admin-form h3 { margin: 16px 0 8px; font-size: 15px; }
.admin-form label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #6b5d50;
}
.admin-form input, .admin-form textarea, .admin-form select {
  display: block;
  width: 100%;
  min-height: 40px;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  font: 14px/1.6 var(--font);
  color: var(--ink);
}
.admin-form textarea { resize: vertical; }
.admin-form .primary-btn { width: 100%; min-height: 44px; margin-top: 4px; }
.admin-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.admin-color input { padding: 2px 4px; height: 40px; cursor: pointer; }

/* 每個重點一個可以展開的區塊 */
.admin-item {
  margin-bottom: 8px;
  padding: 0 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px #4a2a1414;
}
.admin-item[open] { padding-bottom: 12px; }
.admin-item summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  font-weight: 700;
  cursor: pointer;
}
.admin-add, .admin-danger {
  width: 100%;
  min-height: 40px;
  margin-top: 6px;
  border: 1px dashed var(--stone);
  border-radius: 9px;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}
.admin-add:hover { background: var(--yellow); }
.admin-danger { border-color: #e4a69a; color: #b3261e; }
.admin-danger:hover { background: #fde8e4; }

.admin-more {
  margin: 8px 0 12px;
  padding: 0 12px;
  border-radius: 12px;
  background: #f6ede4;
}
.admin-more summary { padding: 12px 0; font-weight: 700; cursor: pointer; }

/* 提示文字 */
.admin-hint { font-size: 12px; line-height: 1.7; color: #8a7a6a; }
.admin-note {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--yellow);
  font-size: 13px;
}
.admin-error { min-height: 1em; margin: 6px 0; font-size: 13px; color: #b3261e; }
.admin-status { margin: 6px 0; font-size: 13px; color: #2f6b3a; }
.admin-ok { font-size: 12px; color: #2f6b3a; }

/* 底部固定的「預覽／發布」按鈕 */
.admin-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 8px;
  margin: 0 -20px;
  padding: 12px 20px 16px;
  background: var(--cream);
  border-top: 1px solid var(--line);
}
.admin-btn {
  flex: 1;
  min-height: 46px;
  border: 0;
  border-radius: 9px;
  background: #f1e6dc;
  font-size: 15px;
  font-weight: 700;
}
.admin-btn:hover { background: var(--yellow); }
.admin-btn.primary { background: var(--coral); color: #fff; }
.admin-btn.primary:hover { background: var(--ink); }

/* 收起面板後，右下角的「管理後台」按鈕 */
.admin-open {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 25;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 700;
  box-shadow: var(--shadow);
}

/* 小提示訊息 */
.toast {
  position: fixed;
  left: 50%;
  top: 24px;
  z-index: 60;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--cream);
  font-size: 14px;
  box-shadow: var(--shadow);
}

/* =========================================================
   手機版（螢幕寬度 800px 以下）
   卡片和清單改成從下方滑出的面板
   ========================================================= */
@media (max-width: 800px) {
  .brand { padding: 10px 14px; }
  .brand h1 { font-size: 17px; }
  .brand p { display: none; }

  .top-tools { flex-direction: column; top: 12px; right: 12px; }
  .tool-btn { min-width: 48px; }

  .hud { bottom: 12px; }
  .hud-btn { min-width: 54px; }

  .card, .list {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 52%;
    border-radius: 22px 22px 0 0;
    z-index: 30;
  }
  .caption { bottom: 84px; }

  .admin {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 70%;
    border-radius: 22px 22px 0 0;
    z-index: 35;
  }
}

/* 使用者在系統設定「減少動態效果」時，關掉轉場動畫 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}