/* 🕯 回憶蠟燭（js/candle.js，本機改動第 113 項）：沿用 .lmui-ov 暗金石紋外框（lmui.css 檔尾「3.5 視窗外框」）＋底部 .ft 按鈕列。
   上面兩步標籤、剩餘點數，中間六列（名字｜－｜數值｜＋｜原本的值），＋－ 用建角畫面那兩顆 3.5 按鈕（/public-assets/create）。
   手機直式、電腦（pcui.css 把 .lmui-ov 變成左邊的小視窗）：照下面；手機橫式（max-height 500）：六列排兩欄、整體縮小 */

.cr-ov .box { height: auto; max-height: 100%; }
.cr-ov .hd .cr-ic { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(255,190,90,.75)); }
.cr-ov .bd { gap: 6px; }

/* 兩步標籤 */
.cr-steps { flex: none; display: flex; gap: 6px; }
.cr-steps span { flex: 1; padding: 4px 6px; border: 1px solid #4a3f30; border-radius: 5px; background: rgba(20,15,10,.85); color: #8f8268; font-size: 13px; font-weight: 700; text-align: center; white-space: nowrap; }
.cr-steps span.on { border-color: #b7791f; background: linear-gradient(#4a3514, #261a08); color: #fde68a; box-shadow: 0 0 6px rgba(242,193,78,.35); }
.cr-steps span.done { color: #c9b98f; }

/* 剩餘點數 */
.cr-left { flex: none; display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 2px 0; color: #c9b98f; font-size: 14px; letter-spacing: .1em; }
.cr-left b { min-width: 2ch; color: #fde68a; font: 700 28px/1 Georgia, "Times New Roman", serif; letter-spacing: 0; text-align: center; text-shadow: 0 1px 0 #000, 0 0 10px rgba(253,230,138,.55); }
.cr-left b.zero { color: #9be59b; text-shadow: 0 1px 0 #000, 0 0 8px rgba(155,229,155,.45); }

/* 一項一列 */
.cr-rows { flex: none; display: flex; flex-direction: column; gap: 4px; }
.cr-row { display: grid; grid-template-columns: 3.6em 46px minmax(0, 1fr) 46px 3.6em; align-items: center; gap: 4px; min-height: 42px; padding: 0 6px; border: 1px solid #4a3f30; border-radius: 6px;
  background: linear-gradient(180deg, rgba(42,33,22,.95), rgba(22,17,11,.95)); }
.cr-nm { color: #e8dcc0; font-size: 15px; letter-spacing: .12em; white-space: nowrap; }
.cr-v { display: flex; align-items: baseline; justify-content: center; gap: 3px; color: #f4efe3; font: 700 22px/1 Georgia, "Times New Roman", serif; font-variant-numeric: tabular-nums; }
.cr-v.chg { color: #fde68a; }
.cr-gain { color: #8fd18b; font: 700 12px/1 Arial, Helvetica, sans-serif; font-style: normal; }
.cr-btn { width: 46px; height: 36px; padding: 0; border: 0; background: center / contain no-repeat; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.cr-btn.minus { background-image: url("/public-assets/create/btn-minus.png"); }
.cr-btn.plus { background-image: url("/public-assets/create/btn-plus.png"); }
.cr-btn:active:not(:disabled) { filter: brightness(1.3); }
.cr-btn:disabled { opacity: .28; cursor: default; }
.cr-was { color: #a8997a; font-size: 12px; text-align: right; white-space: nowrap; }

/* 提示那一句、底部按鈕 */
.cr-msg { flex: none; padding: 6px 10px 0; text-align: center; font-size: 14px; line-height: 1.45; color: #9be59b; }
.cr-msg.bad { color: #ff8a73; }
.cr-msg.warn { color: #f3d48a; }
.cr-msg[hidden] { display: none; }
.cr-ov .ft button.go { border-color: #b7791f; background: linear-gradient(#5a3f14, #2e1f08); color: #fde68a; }
.cr-ov .ft button:disabled { opacity: .45; cursor: default; }

/* 手機橫式：窗很矮也很窄（pcui 左邊的小視窗）→ 兩步標籤和剩餘點數同一行、六列排兩欄（不顯示原本的值）、縮小 */
@media (max-height: 500px) {
  .cr-ov .bd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: start; gap: 4px 8px; padding-top: 2px; padding-bottom: 2px; }
  .cr-rows { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
  .cr-steps span { padding: 2px 4px; font-size: 12px; }
  .cr-left { padding: 0; gap: 6px; font-size: 12px; letter-spacing: 0; }
  .cr-left b { font-size: 20px; }
  .cr-row { min-height: 34px; grid-template-columns: 2.2em 30px minmax(0, 1fr) 30px; padding: 0 3px; gap: 2px; }
  .cr-nm { font-size: 13px; letter-spacing: 0; }
  .cr-v { font-size: 17px; gap: 1px; }
  .cr-gain { font-size: 10px; }
  .cr-btn { width: 30px; height: 26px; }
  .cr-was { display: none; }
  .cr-msg { padding-top: 2px; font-size: 12px; line-height: 1.35; }
  .cr-ov .ft { padding: 4px 8px; }
  .cr-ov .ft button { padding: 5px 8px; font-size: 14px; }
}

/* 能力點數（51 級起的升級點數，js/candle.js bonus*）：一項一列（名字｜數值｜＋），選中那列亮起來、確定才送 */
.cr-bonus .cr-row { grid-template-columns: 3.6em minmax(0, 1fr) 46px; padding: 0 8px; }
.cr-bonus .cr-row.sel { border-color: #b7791f; box-shadow: inset 0 0 0 1px rgba(242,193,78,.35), 0 0 6px rgba(242,193,78,.3); }
/* 能力頁最上面的入口（hud.js renderStats） */
.ab-bonus { display: block; width: 100%; margin: 0 0 8px; padding: 8px 10px; border: 1px solid #b7791f; border-radius: 6px; background: linear-gradient(#5a3f14, #2e1f08); color: #fde68a;
  font: 700 15px/1.2 inherit; font-family: inherit; cursor: pointer; box-shadow: 0 0 8px rgba(242,193,78,.35); }
.ab-bonus b { color: #fff3c4; }
@media (max-height: 500px) {
  .cr-bonus .cr-row { grid-template-columns: 2.4em minmax(0, 1fr) 30px; }
}