/* [claude code] 2026-08-18 Sprint 1:全部樣式
 *
 * 🔴 零美術資源:沒有任何圖檔。造型全靠
 *    ① 漢字(單位)+ 黑白 Unicode(地形)
 *    ② CSS 漸層做立體感與地形質感
 *    ③ box-shadow / 外框做狀態(選取、可走、可打)
 *
 * ⚠️ 單位刻意用【漢字】不用 emoji:emoji 放大會糊成一團色塊,
 *    而且跨平台字型會被換掉、大小不一致(dadatg 的教訓)。
 */

:root {
  --bg: #171a21;
  --surface: #1f242e;
  --surface-2: #262c38;
  --border: #363d4c;
  --ink: #e8ecf3;
  /* 🔴 --soft 是【文字色】不是淺色底。brian_joy 踩過:平台頁把它當背景用
   *    → 深底 + 深字整片看不清楚。背景一律用 --surface。 */
  --soft: #98a2b5;
  --accent: #d8a24a;
  --ally: #4c9be8;
  --foe: #e2564a;
  --npc: #48b884;
  --ok: #56b877;
  --warn: #e0a63a;
  --danger: #e2564a;

  --cell: 44px;
  --radius: 10px;
  font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

#app { display: flex; flex-direction: column; min-height: 100vh; }

/* ── 頂欄 ───────────────────────────────────────── */

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #232936, #1b202a);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 19px; font-weight: 700; color: #2a1c08;
  background: linear-gradient(150deg, #f0c574, #c98a2e);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.25);
}
.brand-text { font-size: 17px; font-weight: 600; letter-spacing: .5px; }
.brand-text em { font-style: normal; color: var(--soft); font-size: 13px; }

/* 🔴 固定寬度 + nowrap:回合橫幅的文字長度會變(「第 1 回合」→「第 10 回合」),
 *    不固定的話整條頂欄會左右跳動(brian_joy 的「版面尺寸固定」鐵則)。 */
.turnbar {
  margin-left: auto;
  min-width: 190px; text-align: center; white-space: nowrap;
  padding: 6px 14px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 14px; font-weight: 600;
  transition: background .25s, color .25s, border-color .25s;
}
.turnbar.player { background: rgba(76,155,232,.16); border-color: var(--ally); color: #b9d8f8; }
.turnbar.enemy  { background: rgba(226,86,74,.16);  border-color: var(--foe);  color: #f6bdb7; }
.turnbar.ally   { background: rgba(72,184,132,.16); border-color: var(--npc);  color: #b4e6cd; }
.turnbar.over   { background: rgba(216,162,74,.18); border-color: var(--accent); color: #f2d9a7; }

.topbar-actions { display: flex; gap: 8px; }

.btn {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
  padding: 7px 14px; border-radius: 8px; font-size: 14px; cursor: pointer;
  font-family: inherit;
  transition: filter .15s, opacity .15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.18); }
.btn.primary { background: linear-gradient(180deg, #e0aa52, #c1862c); border-color: #a97524; color: #2b1d06; font-weight: 700; }
.btn.ghost { background: transparent; }
/* 🔴 停用時用 opacity 不用 display:none —— 按鈕消失會讓整條列跳動。 */
.btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── 主區 ───────────────────────────────────────── */

.stage {
  flex: 1; display: flex; gap: 16px; padding: 16px;
  align-items: flex-start; flex-wrap: wrap;
}

.board-wrap { position: relative; }

.board {
  display: grid;
  gap: 2px;
  padding: 8px;
  background: #12151b;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ── 格子 ───────────────────────────────────────── */

.tile {
  width: var(--cell); height: var(--cell);
  position: relative;
  border-radius: 5px;
  display: grid; place-items: center;
  cursor: default;
  user-select: none;
  transition: box-shadow .12s, filter .12s;
}
.tile .terr {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 17px; opacity: .5; pointer-events: none;
}

/* 地形。純 CSS 漸層,零圖檔。 */
.t-plain    { background: linear-gradient(160deg, #55673f, #455433); }
.t-forest   { background: linear-gradient(160deg, #33502f, #223a20); }
.t-mountain { background: linear-gradient(160deg, #6b5c42, #4a3f2d); }
/* 🔴 走不進去的地形必須是【一眼的差別】:偏暗偏冷 + 圖示不透明。
 *    實玩回饋是「不能走但地上沒東西」—— 玩家不會去讀側欄。 */
.t-water    { background: linear-gradient(160deg, #21405e, #16293c); }
.t-water .terr { opacity: .85; color: #8ec4f0; }
.t-mountain .terr { opacity: .8; color: #d9c39a; }
.t-fort     { background: linear-gradient(160deg, #63506b, #453a4d); }
.t-fort .terr { opacity: .8; color: #e6cdf0; }

/* 高亮圖層 */
.tile.mv::after {
  content: ""; position: absolute; inset: 0; border-radius: 5px;
  background: rgba(76,155,232,.34);
  box-shadow: inset 0 0 0 2px rgba(120,190,255,.75);
  pointer-events: none;
}
.tile.atk::after {
  content: ""; position: absolute; inset: 0; border-radius: 5px;
  background: rgba(226,86,74,.30);
  box-shadow: inset 0 0 0 2px rgba(255,140,130,.85);
  pointer-events: none;
}
.tile.sel { box-shadow: 0 0 0 3px var(--accent), 0 0 14px rgba(216,162,74,.5); z-index: 2; }
.tile.hoverpath::after {
  content: ""; position: absolute; inset: 0; border-radius: 5px;
  background: rgba(255,255,255,.20); pointer-events: none;
}
.tile.clickable { cursor: pointer; }
.tile.clickable:hover { filter: brightness(1.25); }

/* ── 單位 ───────────────────────────────────────── */

.unit {
  position: relative; z-index: 3;
  width: 78%; height: 78%;
  border-radius: 7px;
  display: grid; place-items: center;
  font-size: 20px; font-weight: 700;
  color: #f4f7fb;
  border: 2px solid;
  box-shadow: 0 2px 5px rgba(0,0,0,.45);
  /* 移動動畫走 Web Animations API(見 board/anim.js)——
     🔴 不要靠隱式 CSS transition:同步塊裡設起點+終點會被合併成一次 layout,
     transition 沒有起點 → 直接瞬移(brian_joy 的跳棋踩過)。 */
}
.unit.side-0 { background: linear-gradient(160deg, #3b7fc4, #26588f); border-color: #8ec3f5; }
.unit.side-1 { background: linear-gradient(160deg, #37936a, #235f45); border-color: #86e0b6; }
.unit.side-2 { background: linear-gradient(160deg, #c2483d, #8d3129); border-color: #f2a49b; }
.unit.done { filter: grayscale(.75) brightness(.7); }
.unit.dead { display: none; }

/* 血條:純 CSS,寬度由 JS 設 */
.hpbar {
  position: absolute; left: 6%; right: 6%; bottom: -1px; height: 4px;
  border-radius: 2px; background: rgba(0,0,0,.55); overflow: hidden;
  z-index: 4; pointer-events: none;
}
.hpbar i { display: block; height: 100%; background: var(--ok); transition: width .25s; }
.hpbar i.mid { background: var(--warn); }
.hpbar i.low { background: var(--danger); }

/* ── 表演層(飄字) ─────────────────────────────── */

.fx { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.float {
  position: absolute; transform: translate(-50%, -50%);
  font-weight: 800; font-size: 20px;
  text-shadow: 0 2px 0 #000, 0 0 8px rgba(0,0,0,.9);
  white-space: nowrap;
}
.float.dmg { color: #ff8a7e; }
.float.crit { color: #ffd166; font-size: 26px; }
.float.miss { color: #cbd5e4; font-size: 17px; }

/* ── 側欄 ───────────────────────────────────────── */

.side { flex: 1; min-width: 260px; max-width: 380px; display: flex; flex-direction: column; gap: 12px; }

.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
}
.panel-title { margin: 0 0 8px; font-size: 13px; color: var(--soft); font-weight: 600; letter-spacing: 1px; }

.unit-card .uc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.unit-card .uc-glyph {
  width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center;
  font-size: 21px; font-weight: 700; border: 2px solid;
}
.unit-card .uc-name { font-size: 16px; font-weight: 600; }
.unit-card .uc-sub { font-size: 12px; color: var(--soft); }
.uc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: 13px; }
.uc-stats div { background: var(--surface-2); border-radius: 6px; padding: 5px 7px; }
.uc-stats b { color: var(--accent); font-weight: 700; }
.uc-terr { margin-top: 8px; font-size: 12px; color: var(--soft); }

.log { height: 300px; overflow-y: auto; font-size: 13px; line-height: 1.65; }
.log-line { white-space: pre-wrap; word-break: break-word; }
.log-line.sep { color: var(--accent); margin: 6px 0 2px; font-weight: 600; }
.log-line.d1 { color: var(--soft); padding-left: 2px; }
.log-line.win { color: var(--ok); font-weight: 700; }
.log-line.lose { color: var(--danger); font-weight: 700; }

/* ── 戰鬥預估 ───────────────────────────────────── */

.estimate {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(8,10,14,.6); backdrop-filter: blur(2px);
  display: grid; place-items: center;
}
.estimate[hidden] { display: none; }
.est-card {
  width: min(420px, 92vw);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.est-head { font-size: 13px; color: var(--soft); letter-spacing: 2px; margin-bottom: 10px; }
.est-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.est-side { background: var(--surface-2); border-radius: 10px; padding: 10px; }
.est-side .n { font-weight: 600; margin-bottom: 3px; }
.est-side .hp { font-size: 12px; color: var(--soft); }
.est-side .tr { font-size: 12px; color: var(--soft); margin-top: 4px; }
.est-side.foe { border: 1px solid rgba(226,86,74,.5); }
.est-arrow { color: var(--accent); font-size: 20px; }
.est-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.est-nums div { background: var(--surface-2); border-radius: 8px; padding: 8px; text-align: center; }
.est-nums .k { font-size: 11px; color: var(--soft); }
.est-nums .v { font-size: 21px; font-weight: 800; }
.est-nums .v.hit { color: var(--ally); }
.est-nums .v.dmg { color: #ff9a8e; }
.est-nums .v.crit { color: var(--accent); }
.est-lines { margin: 0 0 12px; padding-left: 18px; font-size: 12px; color: var(--soft); }
.est-lines li.hi { color: var(--accent); }
.est-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── toast ─────────────────────────────────────── */

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: #2a3140; border: 1px solid var(--border); color: var(--ink);
  padding: 9px 18px; border-radius: 999px; font-size: 14px; z-index: 80;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.toast[hidden] { display: none; }

/* ── 手機 ───────────────────────────────────────── */

@media (max-width: 820px) {
  :root { --cell: 34px; }
  .stage { flex-direction: column; padding: 10px; }
  .side { max-width: none; width: 100%; }
  .log { height: 200px; }
}