/* ==========================================================================
   Base & Theme
   ========================================================================== */
:root{
  --bg: #0b1220;
  --bg-soft: #0f172a;
  --panel: #111827;
  --panel-2: #0b1220;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --primary: #60a5fa;
  --accent: #34d399;
  --danger: #ef4444;
  --border: rgba(255,255,255,.12);
  --card: #111827aa;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0; padding:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, #1e293b, transparent 60%) , var(--bg);
}

/* 通用小物 */
.hidden{ display:none !important; }
.container{ max-width: 1080px; margin: 0 auto; padding: 16px; }
h1,h2,h3{ margin:8px 0 6px; font-weight: 800; }
p{ line-height: 1.6; color: var(--muted); }

/* ==========================================================================
   Top bar & Player HUD
   ========================================================================== */
#topbar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  background:linear-gradient(180deg, #0f172a, #0b1220);
  border-bottom:1px solid var(--border); padding:10px 16px;
  justify-content: space-between;
}
.brand{ font-weight:700; }
.stats{ display:flex; flex-wrap:wrap; gap:12px; }
.stats div{ display:inline-flex; gap:4px; align-items:center; }
.stats span{ font-weight:700; color:var(--primary); }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; font-weight:700;
  background:#0b1326; border:1px solid var(--border); color:#cbd5e1;
}

/* ==========================================================================
   Buttons / Cards
   ========================================================================== */
.btn{
  appearance:none; border:1px solid var(--border);
  background: linear-gradient(180deg, #1f2937, #111827);
  color:#fff; padding:10px 14px; border-radius:12px; font-weight:700;
  box-shadow: var(--shadow);
  cursor:pointer;
  transition: transform .06s ease, filter .2s ease, background .2s ease;
}
.btn:hover{ filter: brightness(1.06); }
.btn:active{ transform: translateY(1px) scale(.99); }

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow: var(--shadow);
}
.card.clickable{
  cursor:pointer;
  transition: transform .08s ease, filter .2s ease;
  text-decoration: none; /* 移除 <a> 標籤的下底線 */
  color: inherit;
}
.card.clickable:hover{ filter: brightness(1.05); }
.card.clickable:active{ transform: translateY(1px); }

/* 大廳三格選單 */
.grid3{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: stretch;
}

/* 讓按鈕/超連結外觀一致、等高置中 */
.grid3 .card.clickable{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  min-height: 140px;
  padding: 14px;
  text-align: center;
}

/* 移除原生按鈕外觀差異，保持卡片式樣 */
.grid3 button.card, .grid3 a.card{
  border: 0;
  background: transparent;
}

/* 卡片內標題與說明的間距 */
.grid3 .card.clickable h2{
  margin: 0 0 6px;
  font-size: 1.1rem;
}
.grid3 .card.clickable p{
  margin: 0;
  opacity: .85;
  font-size: .95rem;
}



/* ==========================================================================
   Screens
   ========================================================================== */
.screen{ display:block; }
.screen.hidden{ display:none; }

/* ==========================================================================
   Board (10x10, responsive square)
   ========================================================================== */
#board-wrap{
  display:grid; grid-template-columns: 1fr;
  gap: 12px; align-items:start;
}
#board{
  position:relative;
  width: min(92vw, 560px);
  aspect-ratio: 1 / 1;
  margin: 8px auto;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  background: linear-gradient(180deg, #0f172a, #0b1220);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.cell{
  position:relative;
  border: 1px solid rgba(255,255,255,.04);
  background: rgba(255,255,255,.02);
}
.cell:nth-child(odd){ background: rgba(255,255,255,.03); }

/* 左右「領域」上色（淡） */
.blue-zone{ background: linear-gradient(180deg, rgba(56,189,248,.06), rgba(59,130,246,.04)); }
.red-zone { background: linear-gradient(180deg, rgba(248,113,113,.06), rgba(244,63,94,.04)); }

/* 主塔標記地板 */
.goal{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), inset 0 0 18px rgba(255,255,255,.06);
}

/* 單位 / 主塔（層級基準） */
.unit, .tower{
  position:absolute; inset:4px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:flex-end; justify-content:center;
  text-align:center; font-size:.8rem; font-weight:800; color:#fff;
  overflow:hidden;
  z-index: 1; /* 供特效覆蓋 */
}
.unit{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.unit.blue{ outline: 2px solid rgba(96,165,250,.55); }
.unit.red { outline: 2px solid rgba(248,113,113,.55); }

.unit.has-sprite{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 單位名稱（可選，如果想顯示） */
.unit::after{
  content: attr(data-name);
  position:absolute; left:4px; right:4px; bottom:2px;
  font-size: .7rem; font-weight:800; color:#e5e7eb;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

/* 主塔外觀 */
.tower{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.tower.blue{ outline: 3px solid rgba(96,165,250,.6); }
.tower.red { outline: 3px solid rgba(248,113,113,.6); }

/* ==========================================================================
   HUD / Log
   ========================================================================== */
#battle-hud{
  display:grid; gap: 10px; grid-template-columns: 1fr;
  margin: 8px auto; max-width: min(92vw, 560px);
}
.hud-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  justify-content: flex-start;
  align-items: center;
  background: linear-gradient(180deg, #0f172a, #0b1220);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}
.hud-text {
  color: #cbd5e1;
  font-weight: 800;
  white-space: nowrap;
}
#battle-log{
  height: 300px; overflow:auto; padding:10px 12px;
  background: #0b1220; border:1px solid var(--border); border-radius:12px;
  box-shadow: inset 0 0 20px rgba(0,0,0,.25);
}
#battle-log p{ margin:6px 0; color:#cbd5e1; }
#battle-log p.crit{ color:#ffe56d; }
#battle-log p.miss{ color:#94a3b8; }

/* ==========================================================================
   Animations (jump / knockback / slash arc / damage float)
   ========================================================================== */
/* 攻擊者：往上跳一下 */
@keyframes unit-jump {
  0% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
  100%{ transform: translateY(0); }
}
.anim-jump { animation: unit-jump 260ms ease-out; }

/* 受擊者：依方向小退（方向用 CSS 變數帶） */
@keyframes unit-knock {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(var(--kbx, 0), var(--kby, 0)); }
  100% { transform: translate(0,0); }
}
.anim-knock { animation: unit-knock 260ms ease-out; }

/* 半圓斬擊（確保在上層顯示；由 svg 本體淡入淡出） */
.slash-arc{
  position:absolute; inset:6px; pointer-events:none;
  z-index: 3;
  animation: slash-fade 320ms ease-out forwards;
}
.slash-arc path{
  fill:none; stroke:#eef2ff; stroke-width:6; stroke-linecap:round;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.35));
}
.slash-arc.blue path{ stroke:#93c5fd; }
.slash-arc.red  path{ stroke:#fda4af; }
@keyframes slash-fade{
  0%   { opacity:0; }
  20%  { opacity:1; }
  100% { opacity:0; }
}

/* 紅字傷害（-7 HP）— 顯示 1000ms */
.damage-fx{
  position:absolute; top:6px; left:50%; transform:translate(-50%, 6px) scale(.9);
  font-weight:900; font-size:.95rem; color:#ff6464;
  text-shadow:0 2px 4px rgba(0,0,0,.55);
  pointer-events:none; opacity:0;
  z-index: 4;
  animation: damage-float 1000ms ease-out forwards; /* 1 秒 */
}
.damage-fx.crit{ color:#ffe56d; text-shadow:0 0 10px rgba(255,229,109,.55), 0 2px 4px rgba(0,0,0,.6); }
@keyframes damage-float {
  0%{ opacity:0; transform:translate(-50%, 10px) scale(.9); }
  15%{ opacity:1; transform:translate(-50%, 0)    scale(1.0); }
  100%{ opacity:0; transform:translate(-50%, -22px) scale(1.12); }
}

/* ==========================================================================
   HP Bar (unit bottom)
   ========================================================================== */
.unit .hpbar{
  position:absolute; left:6px; right:6px; bottom:6px; height:6px;
  border-radius:6px; overflow:hidden; background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.06);
}
.unit .hpbar .fill{
  height:100%; width:100%;
  background: linear-gradient(180deg, #22c55e, #16a34a);
  transition: width .18s ease;
}
.unit.red .hpbar .fill{ background: linear-gradient(180deg, #f87171, #ef4444); }

/* ==========================================================================
   Inspect Tip (pause & click) — 最高層
   ========================================================================== */
.inspect-tip{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  padding:4px 8px; border-radius:8px; font-size:.85rem; font-weight:700;
  background:rgba(0,0,0,.90); border:1px solid rgba(255,255,255,.25); color:#fff;
  pointer-events:none; white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  z-index: 10; /* 置於所有特效與單位上層 */
}

/* ==========================================================================
   Tables & Chips for Records page
   ========================================================================== */
table{ width:100%; border-collapse: collapse; }
thead th{
  text-align:left; background:#0b1326; border-bottom:1px solid var(--border);
  padding:8px; color:#cbd5e1;
}
tbody td{ padding:8px; border-bottom:1px solid rgba(255,255,255,.06); color:#cbd5e1; }
.chip{
  display:inline-block; margin:4px 6px 0 0; padding:6px 10px; border-radius:999px;
  background:#0b1326; border:1px solid var(--border); color:#cbd5e1; font-weight:700;
}

/* ==========================================================================
   Utility spacing
   ========================================================================== */
.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.mt-8{ margin-top:8px; }
.mt-12{ margin-top:12px; }
.mt-16{ margin-top:16px; }
.center{ display:flex; align-items:center; justify-content:center; }

/* 新增輸入框樣式 */
.input-text {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  min-width: 220px;
}
/* 讓重要的 HUD 文字更突出 */
#battle-hud strong {
  font-size: 1.1rem;
  color: var(--primary);
  margin-left: 4px;
}

.damage-fx.heal { color: #2ecc71; }

#status-panel { border:1px solid #ccc; border-radius:8px; padding:8px; background:#fff; max-height:300px; overflow:auto; }
#status-panel .panel-title { font-weight:700; margin-bottom:6px; }
.status-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 0; border-bottom:1px dashed #eee; cursor:pointer; }
.status-row:last-child { border-bottom:none; }
.status-name { font-size:12px; opacity:.8; }
.badges { display:flex; flex-wrap:wrap; gap:4px; }
.badge { font-size:11px; padding:2px 6px; border-radius:999px; line-height:1.6; }
.badge.buff { background:#e8f6ff; border:1px solid #bfe7ff; }
.badge.debuff { background:#ffecec; border:1px solid #ffc6c6; }
.unit-blue { color:#1877f2; }
.unit-red  { color:#d94848; }
.cell.inspect { outline:2px solid #ffb703; outline-offset:-2px; }


/* 出戰名單：10 格（五個一排，兩排） */
#lineup{
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 8px;
  align-items: center;
}
#lineup select{ width:100%; }


/* 佈局：棋盤在左、右欄放 HUD + log */
#screen-battle > .card {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-auto-rows: auto;
  gap: 10px;
}
#screen-battle .hud-row,
#screen-battle > .card > .row {
  grid-column: 1 / -1;
}
#board { grid-column: 1; }
#battle-log { grid-column: 2; max-height: 900px; overflow: auto; align-self: start; }
#skill-hud { grid-column: 2; align-self: start; }


/* === Battle two-column layout: board left, HUD+log right === */
#screen-battle > .card{
  display: grid;
  grid-template-columns: min(92vw, 560px) 320px;
  gap: 12px;
  align-items: start;
}
/* Header & control row span full width */
#screen-battle #battle-hud,
#screen-battle .row { grid-column: 1 / -1; }
/* Let children (#board, #battle-side) participate in grid */
#battle-wrap{ display: contents; }
#board{ grid-column: 1; }
#battle-side{ grid-column: 2; display:flex; flex-direction:column; gap:8px; }
#skill-hud{ grid-column: 2; }
#skill-hud.docked{ position: sticky; top: 0; right: auto; left: auto; width: auto; max-width: 320px; }

/* fix: 讓補血浮動文字浮在棋子上層 */
.fx-heal{
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translate(-50%, -2px);
  font-weight: 900;
  color: #22c55e;              /* 綠色 */
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  z-index: 5;                  /* 高於 .unit（z-index:1） */
  pointer-events: none;
  animation: damage-float 700ms ease-out forwards; /* 沿用現有動畫 */
}