/* =========================================================
 * 檔案：src/styles/main.css
 * 用途：遊戲的全部樣式——配色（深色／淺色自動切換）、直式與橫式兩種版面、
 *       按鈕、積木盤格位、拖拉效果、對話框。
 * 誰會用到：index.html 載入。版面的「大小」由 layout.js 透過 CSS 變數設定：
 *   --cell          木盒一格幾像素
 *   --slot          積木盤一個格位幾像素
 *   --tray-columns  積木盤排幾欄
 * ========================================================= */

/* ---------- 配色（預設深色） ---------- */
:root {
  --mat: #4b4d52;          /* 桌墊底色 */
  --mat2: #414348;         /* 桌墊斜紋 */
  --ink: #f3f1ec;          /* 文字 */
  --ink-dim: #c9c7c1;      /* 次要文字 */
  --pine: #ead7b0;         /* 木盒外框（松木色） */
  --pine-dark: #c6a979;
  --floor: #9b6a3e;        /* 木盒底板 */
  --panel: rgba(40, 41, 45, .86);   /* 面板底色 */
  --line: #62656b;         /* 邊框線 */
  --accent: #f2c81a;       /* 強調色（黃） */
  --bad: #ff5b5b;          /* 警示色（紅） */
  --highlight: #f2c81a;    /* 訊息裡的粗體字色 */

  /* 版面間距 */
  --gutter: 12px;          /* 左右留白 */
  --gap: 8px;              /* 區塊之間的間距 */
  --side-min: 220px;       /* 橫式版面右欄（訊息＋積木盤）最窄寬度 */
  --button-height: 44px;   /* 按鈕高度（手指好按的最小尺寸） */

  /* 預設值（layout.js 會覆寫） */
  --cell: 40px;
  --slot: 64px;
  --tray-columns: 4;

  height: 100%;
  box-sizing: border-box;
  /* iPhone 瀏海／底部橫條的安全區域 */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 淺色模式（系統設定為淺色時） */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --mat: #9a9da3;
    --mat2: #8f9298;
    --ink: #1f2023;
    --ink-dim: #34363a;
    --panel: rgba(246, 244, 239, .92);
    --line: #bdb9b0;
    --highlight: #8a5a00;
  }
}
:root[data-theme="light"] {
  --mat: #9a9da3;
  --mat2: #8f9298;
  --ink: #1f2023;
  --ink-dim: #34363a;
  --panel: rgba(246, 244, 239, .92);
  --line: #bdb9b0;
  --highlight: #8a5a00;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* ---------- 整頁：固定一個螢幕大小，禁止捲動 ---------- */
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;        /* 防止手機下拉重新整理 */
  color: var(--ink);
  background: var(--mat);
  background-image: repeating-linear-gradient(135deg, var(--mat) 0 14px, var(--mat2) 14px 26px);
  font-family: "Huninn", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
  line-height: 1.5;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;      /* 防止 iPhone 長按跳出選單 */
  /* 由上而下：遊戲主畫面（吃掉剩下高度）＋ 頁尾 footer（有空間才顯示） */
  display: flex;
  flex-direction: column;
}

/* ---------- 主畫面格線 ---------- */
.app {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  gap: var(--gap);
  padding: var(--gap) var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  overflow: hidden;
  justify-content: center;
}

/* 直式：由上而下 標題 → 訊息（一行字）→ 木盒 → 積木盤（吃掉剩下空間）→ 工具列 */
.app[data-mode="portrait"] {
  grid-template-columns: minmax(0, 860px);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "top"
    "message"
    "board"
    "tray"
    "tools";
}

/* 直式時兩欄「拆開」（display: contents），裡面的區塊直接照上面的格線排 */
.app[data-mode="portrait"] .column {
  display: contents;
}
.app[data-mode="portrait"] .topbar     { grid-area: top; }
.app[data-mode="portrait"] .board-area { grid-area: board; }
.app[data-mode="portrait"] .message    { grid-area: message; }
.app[data-mode="portrait"] .tray       { grid-area: tray; }
.app[data-mode="portrait"] .tools      { grid-area: tools; }

/* 橫式：左欄「標題 → 木盒 → 工具列」，右欄「訊息 → 積木盤」
   左欄寬度 = 木盒外框寬度（10 格 + 兩邊外框各 0.22 格） */
.app[data-mode="landscape"] {
  grid-template-columns: calc(var(--cell) * 10.44) minmax(var(--side-min), 560px);
  grid-template-rows: minmax(0, 1fr);
  column-gap: calc(var(--gap) * 2);
}
.app[data-mode="landscape"] .column {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
  min-height: 0;
}
.app[data-mode="landscape"] .board-area {
  flex: 1 1 auto;
  min-height: 0;
}
.app[data-mode="landscape"] .tray {
  flex: 1 1 0;
}

/* ---------- 按鈕 ---------- */
button {
  font: inherit;
  color: inherit;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  min-height: var(--button-height);
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;       /* 取消手機「點兩下放大」造成的延遲 */
}
button:hover:not(:disabled) {
  border-color: var(--accent);
}
button:disabled {
  opacity: .4;
  cursor: default;
}
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #1f2023;
}
button .icon {
  margin-right: 4px;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* 按鈕列太擠時（layout.js 加上 .compact）：圖示在上、文字在下，縮小字體 */
.compact button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  font-size: 12px;
  line-height: 1.15;
}
.compact button .icon {
  margin-right: 0;
  font-size: 16px;
}

/* ---------- 標題列 ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.topbar .title {
  flex: 1 1 auto;
  min-width: 0;                     /* 允許被擠窄（文字變成…） */
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.topbar h1 {
  font-weight: 400;
  font-size: 1.15rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .status {
  font-size: .75rem;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar button {
  flex: none;
}

/* ---------- 木盒 ---------- */
.board-area {
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame {
  background: var(--pine);
  border-radius: 8px;
  padding: calc(var(--cell) * .22);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .35), inset 0 0 0 2px var(--pine-dark);
  flex: none;
}
#board {
  position: relative;
  width: calc(var(--cell) * 10);
  height: calc(var(--cell) * 6);
  background-color: var(--floor);
  border-radius: 2px;
  /* 格線 */
  background-image:
    linear-gradient(rgba(0, 0, 0, .2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .2) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  touch-action: none;               /* 在木盒上拖拉時，瀏覽器不要捲動或縮放 */
}

/* ---------- 訊息列：一行純文字（沒有外框），高度固定 ----------
   平常顯示「已經放了 x 塊。」這種短句，用最大字體一行顯示；
   提示這類長句子，render.js 的 fitMessageText() 會把字體縮小，
   一行放不下就折成兩行小字（2 行 × 11px × 行高 1.25 ≈ 28px，剛好放得下）。
   高度固定不變，所以訊息長短不會讓木盒大小跳動。 */
.message {
  height: 28px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 2px;
  font-size: 15px;
  line-height: 1.25;
}
#messageText {
  width: 100%;
}
.message b {
  color: var(--highlight);
  font-weight: 400;
}

/* ---------- 積木盤：12 個固定格位 ---------- */
.tray {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(var(--tray-columns), var(--slot));
  grid-auto-rows: var(--slot);
  gap: 6px;
  justify-content: center;
  align-content: center;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  touch-action: none;               /* 在積木盤上拖拉時，瀏覽器不要捲動或縮放 */
}
.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  cursor: grab;
}
/* 積木已放進木盒：格位留空，只剩淡淡的虛線 */
.slot.empty {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, .12);
  cursor: default;
}
.slot.selected {
  background: rgba(242, 200, 26, .14);
  box-shadow: inset 0 0 0 2px rgba(242, 200, 26, .6);
}
/* 提示要放的積木：格位閃爍 */
.slot.cue {
  background: rgba(242, 200, 26, .28);
}

/* ---------- 工具列 ---------- */
.tools {
  display: flex;
  gap: 6px;
  min-width: 0;
}
.tools button {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 6px;
}

/* ---------- 積木 ---------- */
svg {
  display: block;
  overflow: visible;
}
.piece {
  position: absolute;
  pointer-events: none;             /* 只有色塊本身可以按，積木旁邊的空白不算 */
}
.piece rect {
  pointer-events: auto;
  cursor: grab;
}
.piece svg,
.slot svg {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
  pointer-events: none;             /* 積木盤：整個格位都能抓，交給格位處理 */
}
.selected svg {
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 5px var(--accent));
}
.warn svg {
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--bad));
}

/* 開局預擺、鎖住不能動的積木：顏色變暗、變灰一點，和自己放的積木區分；
   滑鼠移上去顯示「禁止」游標 */
.piece.locked svg {
  filter: saturate(.55) brightness(.7) drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}
.piece.locked rect {
  cursor: not-allowed;
}

/* 拖拉中跟著手指的積木 */
.flying {
  position: fixed;
  z-index: 50;
  left: 0;
  top: 0;
  pointer-events: none;
}
.flying svg {
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .45));
}

/* 提示框、落點預覽框 */
.ghost,
.preview {
  position: absolute;
  pointer-events: none;
}
.ghost path {
  stroke: #fff;
  stroke-dasharray: 4 3;
}

@media (prefers-reduced-motion: no-preference) {
  .ghost     { animation: pulse 1.2s ease-in-out infinite; }
  .warn      { animation: pulse 1s ease-in-out infinite; }
  .slot.cue  { animation: pulse 1.2s ease-in-out infinite; }
}
@keyframes pulse {
  50% { opacity: .45; }
}

/* ---------- 對話框 ---------- */
dialog {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--mat);
  color: var(--ink);
  padding: 14px;
  max-width: min(94vw, 640px);
  max-height: calc(100dvh - 16px);
  overflow: auto;                   /* 保險：極小螢幕才會用到 */
}
dialog::backdrop {
  background: rgba(0, 0, 0, .55);
}
dialog h2 {
  font-weight: 400;
  margin: 0 0 8px;
  font-size: 1.25rem;
}
.row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.row.nowrap {
  flex-wrap: nowrap;
  margin-top: 0;
}
.dim {
  color: var(--ink-dim);
  font-size: .9rem;
  margin: 0;
}
label.toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 32px;
  cursor: pointer;
}
label.toggle input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}
input[type=number] {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 0 6px;
  min-height: var(--button-height);
  width: 4.2em;
  min-width: 0;
  flex: 1 1 auto;
}

/* 「重來」對話框：開局先擺幾塊的下拉選單（外觀和數字輸入框一致） */
#newGameLockedCount {
  font: inherit;
  color: inherit;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 0 8px;
  min-height: var(--button-height);
  min-width: 4.5em;
  cursor: pointer;
}
#newGameDialog label.row {
  margin: 12px 0 6px;
}

/* 對話框底部的按鈕列（例如「算了／開始」）：
   寬螢幕 → 靠右對齊（主要按鈕在最右邊）
   手機（寬度 560px 以下）→ 平均分散：按鈕之間、按鈕和兩側邊緣的距離都一樣 */
.dialog-actions {
  justify-content: flex-end;
  margin-top: 14px;
}
@media (max-width: 560px) {
  .dialog-actions {
    justify-content: space-evenly;
    column-gap: 0;      /* 拿掉按鈕原本的間距，不然中間會比兩側多一點 */
  }
}

/* 解答簿：直的螢幕上下排（小木盒在上），矮的橫螢幕左右排 */
.solution-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.solution-board {
  background: var(--pine);
  padding: 6px;
  border-radius: 6px;
  align-self: center;
}
.solution-board svg {
  background: var(--floor);
  /* 寬度：不超過對話框、不超過 460px；螢幕矮時依剩餘高度縮小（寬:高 = 10:6） */
  width: clamp(160px, min(84vw, (100dvh - 390px) * 10 / 6), 460px);
  height: auto;
}
.solution-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.solution-number {
  font-size: 1.4rem;
  min-width: 3.4em;
  text-align: center;
}
.solution-controls .row.nowrap button {
  padding: 0 10px;
}

@media (orientation: landscape) and (max-height: 600px) {
  dialog {
    max-width: 96vw;
  }
  .solution-layout {
    flex-direction: row;
    align-items: center;
  }
  .solution-board svg {
    width: clamp(160px, min(44vw, (100dvh - 100px) * 10 / 6), 460px);
  }
}