/* /play 渲染殼——極簡骨架樣式(WP 7-3)。視覺細節(單位圖示、血條配色、
   事件動畫)是 7-4/7-5 的範疇;這裡只求版面乾淨、掛點清楚。 */

:root {
  color-scheme: light dark;
  --fg: #1a1a1a;
  --bg: #f4f4f4;
  --panel-bg: #ffffff;
  --border: #ccc;
  --accent: #2a6cd6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #eaeaea;
    --bg: #181818;
    --panel-bg: #242424;
    --border: #444;
    --accent: #6ea8ff;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, "Segoe UI", sans-serif;
  color: var(--fg);
  background: var(--bg);
}

header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
}

header h1 {
  font-size: 1.1rem;
  margin: 0;
}

nav {
  display: flex;
  gap: 1rem;
}

nav a {
  color: var(--fg);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: bold;
}

main {
  padding: 1rem;
}

#play-layout {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

#game-canvas {
  background: #000;
  border: 1px solid var(--border);
  max-width: 100%;
  height: auto;
  cursor: crosshair;
  /* #play-layout 是 flex row,預設 align-items:stretch 會把 height:auto 的
     item 拉伸到與最高的 flex 手足(#side-panel,now 有實際 hud/deploy-panel
     內容)等高,毀掉 canvas 的方格長寬比(WP 7-4/7-5 填入內容後才會顯形的
     bug,實測 2026-07-21)。opt-out 讓 canvas 依自身 intrinsic ratio 定高。 */
  align-self: flex-start;
}

#side-panel {
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#hud,
#deploy-panel {
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  padding: 0.75rem;
  background: var(--panel-bg);
  min-height: 3rem;
}

/* ---- hud.js(WP 7-5):供給/進度/HQ 條、tick 行、勝負面板、DeployRejected toast ---- */

.hud-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.hud-row label {
  min-width: 3em;
  font-size: 0.85rem;
  opacity: 0.8;
}

.hud-bar {
  flex: 1;
  height: 0.8rem;
  background: rgba(128, 128, 128, 0.25);
  border-radius: 0.4rem;
  overflow: hidden;
}

.hud-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.15s linear;
}

.hud-bar.hp .hud-bar-fill {
  background: #4caf50;
}

.hud-bar-text {
  min-width: 3.5em;
  text-align: right;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
}

.hud-tick {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

/* 時限倒數剩 <10% 的視覺提示(hud.js `nearLimit`)。 */
.hud-tick.hud-tick-warn {
  color: #e05a5a;
  opacity: 1;
  font-weight: bold;
  animation: hud-tick-pulse 1s ease-in-out infinite;
}

@keyframes hud-tick-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

#hud-outcome {
  margin-top: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  font-weight: bold;
  text-align: center;
}

#hud-outcome.outcome-victory {
  background: rgba(76, 175, 80, 0.25);
  color: #4caf50;
}

#hud-outcome.outcome-timeup {
  background: rgba(224, 90, 90, 0.25);
  color: #e05a5a;
}

#hud-toast {
  margin-top: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.25rem;
  background: rgba(224, 90, 90, 0.85);
  color: #fff;
  font-size: 0.85rem;
  text-align: center;
  opacity: 1;
}

#hud-toast.fade-out {
  animation: hud-toast-fade 3s ease-in forwards;
}

@keyframes hud-toast-fade {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ---- input.js(WP 7-5):佈署面板 ---- */

.deploy-title {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

.deploy-kind-btn {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
}

.deploy-kind-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.deploy-kind-btn.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.deploy-kind-btn .kind-cost,
.deploy-kind-btn .kind-cooldown {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  opacity: 0.85;
}

.deploy-cancel-btn {
  width: 100%;
  padding: 0.3rem 0.6rem;
  margin-top: 0.25rem;
  border: 1px dashed var(--border);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}

.deploy-hint {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  min-height: 1.2em;
  opacity: 0.85;
}

#status-line {
  font-family: ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-all;
}

/* main.js showError()——真的壞了(wasm/init/step/frame 解析失敗),與
   showFallbackStatus() 的「功能尚未落地」訊息視覺區分(review-gate #1)。 */
#status-line.status-error {
  color: #fff;
  background: #7a2020;
  padding: 0.4rem 0.6rem;
  border-radius: 0.25rem;
  font-weight: bold;
}

#replay-panel {
  margin-top: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background: var(--panel-bg);
}

#replay-output {
  width: 100%;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
}

#replay-download {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--accent);
}

/* ---- 分享連結(WP 9-3/ADR-010 D5,main.js handleOutcomeStop 掛點) ---- */

#replay-share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

#replay-share-btn {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background: var(--panel-bg);
  color: var(--fg);
  cursor: pointer;
}

#replay-share-status {
  font-size: 0.8rem;
  opacity: 0.85;
}

#replay-share-url {
  flex: 1 1 100%;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
}

/* ---- /replay(WP 9-3):渲染 + 側欄控制列,佈局鏡射 #play-layout/#side-panel ---- */

#replay-layout {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

#replay-canvas {
  background: #000;
  border: 1px solid var(--border);
  max-width: 100%;
  height: auto;
  align-self: flex-start; /* 同 #game-canvas:避免被 flex row 手足拉伸長寬比。 */
}

#replay-side-panel {
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#replay-hud,
#replay-controls {
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  padding: 0.75rem;
  background: var(--panel-bg);
  min-height: 3rem;
}

.replay-controls-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

#replay-play-btn,
#replay-step-btn {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
}

#replay-step-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.replay-scrub-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#replay-scrub {
  flex: 1;
}

#replay-tick-label {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  min-width: 6em;
  text-align: right;
}

/* -12 決定性事故橫幅(ADR-010 D2:游標 sticky,前端須顯著標示,避免觀者
   誤信所見——刻意用比 status-error 更搶眼的樣式,常駐不像 toast 會消失)。 */
#replay-incident-banner {
  margin: 0.75rem 0;
  padding: 0.6rem 0.9rem;
  border: 2px solid #e05a5a;
  border-radius: 0.25rem;
  background: rgba(224, 90, 90, 0.18);
  color: #e05a5a;
  font-weight: bold;
}

#replay-status {
  font-family: ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-all;
}

#replay-status.status-error {
  color: #fff;
  background: #7a2020;
  padding: 0.4rem 0.6rem;
  border-radius: 0.25rem;
  font-weight: bold;
}

/* ---- /editor(WP 8-3/8-4):工具列、畫布+側欄、面板各區塊 ---- */

#editor-toolbar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

#editor-toolbar button {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background: var(--panel-bg);
  color: var(--fg);
  cursor: pointer;
}

#editor-toolbar button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#editor-status {
  font-family: ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-all;
}

#editor-status.status-error {
  color: #fff;
  background: #7a2020;
  padding: 0.4rem 0.6rem;
  border-radius: 0.25rem;
  font-weight: bold;
}

#editor-layout {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

#editor-canvas {
  background: #000;
  border: 1px solid var(--border);
  max-width: 100%;
  height: auto;
  cursor: crosshair;
  align-self: flex-start; /* 同 #game-canvas:避免被 flex row 手足拉伸長寬比,見該規則註解。 */
}

#editor-side-panel {
  min-width: 260px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.editor-section {
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem 0.75rem;
  background: var(--panel-bg);
}

.editor-section legend {
  padding: 0 0.4rem;
  font-size: 0.8rem;
  opacity: 0.8;
}

.editor-section-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.editor-tool-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.editor-tool-btn {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background: var(--bg);
  color: var(--fg);
  font-size: 0.78rem;
  cursor: pointer;
}

.editor-tool-btn.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.editor-flags-row {
  font-size: 0.78rem;
  opacity: 0.9;
}

.editor-flags-row input[type="number"] {
  width: 4.5em;
}

.editor-hq-cost-preview {
  font-style: italic;
  opacity: 0.75;
}

.editor-budget-text {
  font-family: ui-monospace, Consolas, monospace;
}

.editor-budget-text.over-budget {
  color: #e05a5a;
  font-weight: bold;
}

.editor-validate-light {
  font-weight: bold;
  padding: 0.3rem 0.5rem;
  border-radius: 0.25rem;
}

.editor-validate-light.light-green {
  background: rgba(76, 175, 80, 0.25);
  color: #4caf50;
}

.editor-validate-light.light-red {
  background: rgba(224, 90, 90, 0.25);
  color: #e05a5a;
}

.editor-validate-errors {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.78rem;
  color: #e05a5a;
}

.editor-trigger-list,
.editor-destroyed-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
}

.editor-trigger-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  justify-content: space-between;
}

.editor-trigger-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.78rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.4rem;
}

.editor-inline-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.editor-inline-label select,
.editor-inline-label input[type="text"] {
  flex: 1;
  min-width: 0;
}

#editor-panel input[type="number"] {
  width: 6em;
}

/* ---- /editor 畫布模式(T-011 WP 11-3):模式切換、工具列分組、畫布側欄 ---- */

#editor-toolbar {
  flex-wrap: wrap;
  align-items: center;
}

.editor-toolbar-group,
#editor-mode-switch {
  display: flex;
  gap: 0.5rem;
}

/* display:flex 會蓋掉 [hidden] 的預設 display:none,顯式補回。 */
.editor-toolbar-group[hidden],
#editor-mode-switch[hidden] {
  display: none;
}

#editor-mode-switch {
  gap: 0;
  margin-right: 0.5rem;
}

#editor-mode-switch button[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
  font-weight: bold;
}

#editor-canvas-unavailable {
  font-size: 0.8rem;
  opacity: 0.8;
}

.canvas-draft-hash {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  opacity: 0.8;
  word-break: break-all;
}

#editor-canvas-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#editor-canvas-panel[hidden] {
  display: none;
}

#editor-canvas-panel input[type="number"] {
  width: 6em;
}