/* 匯入像素字型 */
@font-face {
  font-family: 'Cubic11';
  src: url('fonts/Cubic-11-1.430/fonts/web/Cubic_11.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* 遊戲畫面全滿版，無論裝置 */
html, body {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  font-family: 'Cubic11', sans-serif;
  display: block;
}

canvas {
    display: block;
}

/* 開發者工具主視窗預設摺疊，靠頂且最大寬度 300px，手機滿版 */
#dev-tools {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  width: 100%;
  max-width: 300px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  border: 1px solid #ccc;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  transition: height 0.3s, max-width 0.3s;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

/* 標題列，摺疊時仍顯示，維持原本字體大小 */
.dev-title {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #eee;
  background: transparent;
  margin: 0;
  padding: 0;
  user-select: none;
  position: relative;
  z-index: 101;
  transition: height 0.2s;
  text-align: center;
  font-weight: bold;
  padding: 10px 0;
  cursor: move; /* 增加拖移指標 */
}
#dev-tools .dev-title {
  height: 32px !important; /* 使用 !important 確保不被覆蓋 */
  padding: 6px 0 0 0 !important; /* 移除內邊距影響 */
  margin: 0 !important; /* 移除外邊距影響 */
  line-height: 32px; /* 確保文字垂直居中 */
}
#dev-tools.minimized .dev-title {
  height: 32px; /* 確保摺疊狀態下高度不變 */
}

/* 最小化/展開按鈕（右上角，經典配色） */
#minimize-dev-tools {
  position: absolute;
  top: 20px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  line-height: 30px;
  width: 30px;
  height: 30px;
  text-align: center;
  transform: translateY(-50%);
  z-index: 102;
}
#minimize-dev-tools:hover {
  background: #666;
  border: 1px solid #aaa;
}
#dev-tools.collapsed #minimize-dev-tools {
  transform: translateY(0);
}

/* 內容區塊調整 */
.dev-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 10px;
  display: none;
}
#dev-tools.minimized .dev-content {
  display: none !important;
}
#dev-tools.expanded .dev-content {
  display: block;
}

/* 最小化狀態：只顯示標題列與按鈕，空間略增方便顯示 */
#dev-tools.minimized {
  height: 40px !important;
  min-height: 0 !important;
  max-height: 50px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 確保不同區域的點擊事件正確傳遞 */
#dev-tools {
  pointer-events: auto;
}

#dev-tools .dev-title {
  pointer-events: auto;
}

#dev-tools .dev-content {
  pointer-events: auto;
}

#minimize-dev-tools {
  pointer-events: auto;
}

/* 吸附效果 */
#dev-tools.snap-left {
  left: 0 !important;
}
#dev-tools.snap-right {
  right: 0 !important;
  left: auto !important;
}
#dev-tools.snap-top {
  top: unset !important; /* 移除強制吸附到畫面上方的樣式 */
}
#dev-tools.snap-bottom {
  bottom: 0 !important;
  top: auto !important;
}

/* 日誌區域與複製按鈕：固定高度，內容多時自動捲動，複製按鈕永遠可見 */
#log-container {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 100px;
  max-height: 60vh;
  height: auto;
  margin-bottom: 0;
}
#log {
  background-color: rgba(17, 17, 17, 0.8);
  color: #e0e0e0;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 8px 8px 38px 8px;
  overflow-y: auto;
  font-size: 11px;
  white-space: pre-wrap;
  line-height: 1.5;
  flex-grow: 1;
  min-height: 0;
  max-height: 120px;
}

/* 複製按鈕縮小並固定於 log 視窗右下角 */
#copy-log {
  position: absolute;
  bottom: -7px;
  padding: 2px 7px;
  font-size: 10px;
  background-color: #555;
  color: #fff;
  border: 1px solid #777;
  border-radius: 3px;
  cursor: pointer;
  width: 60px !important;
  min-width: 0;
  z-index: 101;
  min-height: 20px;
}
#copy-log:hover {
  background-color: #666;
}

/* 經典灰色按鈕 */
#dev-tools button:not(#minimize-dev-tools) {
  width: 100%;
  margin-bottom: 8px;
  padding: 8px;
  background-color: #666;
  color: white;
  border: 1px solid #888;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Cubic11', sans-serif;
  font-size: 13px;
  transition: background 0.2s, border 0.2s;
}
#dev-tools button:not(#minimize-dev-tools):hover {
  background-color: #888;
  border: 1px solid #aaa;
}

/* 按鈕區塊：一行兩個按鈕 */
.button-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.button-row button {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 按鈕區塊：兩兩排列 */
.button-row-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin-bottom: 8px;
}
.button-row-flex button {
  flex: 1 1 45%;
  min-width: 0;
  margin-bottom: 0;
}

.log-info { color: #66bb6a; }
.log-warning { color: #ffa726; }
.log-error { color: #ef5350; }
.log-debug { color: #29b6f6; }
.log-system { color: #ab47bc; }
.log-input { color: #bdbdbd; }
.log-move { color: #9ccc65; }
.log-nav { color: #5c6bc0; }
.log-success { color: #4caf50; }

/* 響應式設計：大螢幕並排，小螢幕覆蓋，手機底部 */
@media (min-width: 1025px) {
  #game-container {
    width: calc(100% - 300px);
    float: left;
  }
  #dev-tools {
    width: 300px;
    float: right;
  }
}
@media (max-width: 1024px) {
  #game-container {
    width: 100%;
  }
  #dev-tools {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(34, 34, 34, 0.9);
    z-index: 100;
  }
}
@media (max-width: 767px) {
  #game-container {
    width: 100%;
    height: calc(100% - 40vh); /* 增加遊戲畫面高度，減少被開發者工具遮擋 */
  }
  #dev-tools {
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    border-radius: 0 0 8px 8px;
    height: 40vh; /* 增加開發者工具高度，方便操作 */

    top: auto;
    overflow-y: auto; /* 確保內容多時可以滾動 */
  }
  #dev-tools.minimized {
    height: 50px !important;
    max-height: 50px !important;
    padding: 0 !important;
    overflow: hidden !important;
    /* 確保此處沒有任何 position, top, left, right, bottom, transform, margin 設定 */
  }
}
@media (max-width: 767px) and (orientation: landscape) {
  #game-container {
    width: calc(100vw - 300px);
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
  }
  #dev-tools {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: 300px !important;
    max-width: 300px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 0 !important;
    border-radius: 0 0 0 8px;
    z-index: 1000;
    box-shadow: -2px 0 12px rgba(0,0,0,0.25);
    background: rgba(0,0,0,0.85);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  #dev-tools.expanded {
    height: 100vh !important;
    max-height: 100vh !important;
  }
  #dev-tools.minimized {
    height: 40px !important;
    max-height: 40px !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* 增加對超小螢幕的支援 */
@media (max-width: 480px) {
  #dev-tools {
    font-size: 12px; /* 縮小字體以適應小螢幕 */
  }
  #log {
    font-size: 10px; /* 縮小日誌字體，避免過多內容佔用空間 */
  }
  #copy-log {
    font-size: 9px; /* 縮小按鈕字體 */
  }
}

#game-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}