/* ui-overlay.css — 主遊戲 UI 疊層與 Modal 樣式 (對標 demo 設計語言) */

/* 確保容器全螢幕與定位 */
#stage {
  position: relative;
  overflow: hidden;
}

/* 主遊戲 UI 疊層 (覆蓋在 #game canvas 之上，寬度與 roster-modal-window 保持 1120px 居中對齊) */
.game-ui-layer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1120px;
  max-width: 95vw;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 24px 0 20px 0;
}

/* 文字黑邊風格 */
.brawl-stroke {
  font-weight: 900;
  color: #fff;
  text-shadow: 
    -2px -2px 0 #000,  2px -2px 0 #000,
    -2px  2px 0 #000,  2px  2px 0 #000,
     0px  3px 0 #000,  0px -2px 0 #000,
    -2px  0px 0 #000,  2px  0px 0 #000,
     0px  4px 3px rgba(0,0,0,0.7);
}

.brawl-stroke-sm, .menu-panel button:not(.btn-close-modal) {
  font-weight: 800;
  color: #fff;
  text-shadow: 
    -1.5px -1.5px 0 #000,  1.5px -1.5px 0 #000,
    -1.5px  1.5px 0 #000,  1.5px  1.5px 0 #000,
     0px  2px 0 #000;
}

/* 頂部快速入口工具列 */
.main-top-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: auto;
}

.tool-buttons-group {
  display: flex;
  gap: 14px;
}

.tool-box-btn, .menu-panel button:not(.btn-close-modal) {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  border: 2.5px solid #000;
  box-shadow: 0 4px 0 #000;
  border-radius: 12px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
  pointer-events: auto;
}

.tool-box-btn:hover, .menu-panel button:not(.btn-close-modal):hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #000;
}

.tool-box-btn:active, .menu-panel button:not(.btn-close-modal):active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #000;
}

.tool-box-btn.btn-green {
  background: linear-gradient(180deg, #10b981 0%, #047857 100%);
}

.tool-icon {
  font-size: 20px;
}

.tool-label {
  font-size: 15px;
  color: #fff;
}

/* 當前選擇英雄預覽膠囊 */
.current-hero-capsule {
  background: rgba(15, 23, 42, 0.85);
  border: 2px solid #38bdf8;
  border-radius: 30px;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  cursor: pointer;
  pointer-events: auto;
}

/* 底部模式選擇卡片區域 */
.main-bottom-modes-bar {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 16px;
  pointer-events: auto;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

/* 4 個遊戲模式按鈕 (class="game-mode-card-btn") */
.game-mode-card-btn {
  width: 220px;
  height: 68px;
  background: linear-gradient(180deg, #2b3957 0%, #151d2f 100%);
  border: 2.5px solid #000;
  border-radius: 12px;
  box-shadow: 0 5px 0 #000;
  transform: skewX(-8deg);
  display: flex;
  align-items: center;
  padding: 6px 12px;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s, filter 0.1s;
  position: relative;
  overflow: hidden;
}

.game-mode-card-btn:hover {
  filter: brightness(1.15);
  transform: skewX(-8deg) translateY(-3px);
  box-shadow: 0 8px 0 #000, 0 0 14px rgba(56, 189, 248, 0.4);
}

.game-mode-card-btn:active {
  transform: skewX(-8deg) translateY(3px);
  box-shadow: 0 2px 0 #000;
}

/* 各模式主題配色 */
.mode-roguelike {
  background: linear-gradient(180deg, #1e3a5f 0%, #0f1d30 100%);
  border-color: #38bdf8;
}
.mode-survival {
  background: linear-gradient(180deg, #4c1d95 0%, #2e1065 100%);
  border-color: #c084fc;
}
.mode-arena {
  background: linear-gradient(180deg, #831843 0%, #500724 100%);
  border-color: #f43f5e;
}
.mode-sandbox {
  background: linear-gradient(180deg, #065f46 0%, #022c22 100%);
  border-color: #34d399;
}

.mode-avatar-box {
  width: 44px;
  height: 44px;
  background: #000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  transform: skewX(8deg); /* 反向抵消按鈕斜度 */
}

.mode-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: skewX(8deg);
}

.mode-name-txt {
  font-size: 15px;
  letter-spacing: 1px;
}

.mode-sub-txt {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

/* ==========================================================================
   全螢幕彈窗 (ROSTER MODAL & MOVES MODAL)
   ========================================================================== */
.roster-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(4, 7, 15, 0.88);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.roster-modal-overlay.open {
  display: flex;
  opacity: 1;
}

.roster-modal-window {
  width: 1120px;
  max-width: 95vw;
  height: calc(100dvh - 32px);
  max-height: calc(100dvh - 32px);
  background: #0f172a;
  border: 3.5px solid #000;
  border-radius: 20px;
  box-shadow: 0 10px 0 #000, 0 0 35px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: modalPop 0.22s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes modalPop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.roster-header-bar {
  height: 64px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-bottom: 3px solid #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.roster-title-box {
  display: flex;
  align-items: center;
  gap: 14px;
}

.roster-title-txt {
  font-size: 22px;
  color: #f8fafc;
  letter-spacing: 2px;
}

.deck-badge {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  border: 1.5px solid #000;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 13px;
  color: #fff;
}

.btn-close-modal {
  width: 40px;
  height: 40px;
  background: #ef4444;
  border: 2px solid #000;
  border-radius: 10px;
  box-shadow: 0 3px 0 #000;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-close-modal:hover {
  background: #dc2626;
}

.btn-close-modal:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #000;
}

.roster-scroll-surface {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.roster-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.roster-section-banner {
  display: inline-flex;
  padding: 4px 18px;
  background: linear-gradient(180deg, #f97316 0%, #c2410c 100%);
  border: 2px solid #000;
  border-radius: 8px;
  box-shadow: 0 3px 0 #000;
  font-size: 15px;
  color: #fff;
}

.roster-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 16px;
}

/* 英雄名冊固定五欄，放大角色畫布與卡片。 */
#roster-characters-grid {
  grid-template-columns: repeat(5, minmax(170px, 1fr));
}

#roster-characters-grid .b-card {
  width: 100%;
  height: 260px;
  padding: 12px 8px;
}

#roster-characters-grid .b-card-avatar,
#roster-characters-grid .b-card-canvas {
  width: 160px;
  height: 180px;
}

#roster-characters-grid .b-card-name {
  font-size: 16px;
}

#roster-characters-grid .b-card-power-pill {
  font-size: 12px;
}

/* ==========================================================================
   卡片結構 (class="b-card in-squad")
   ========================================================================== */
.b-card {
  width: 132px;
  height: 150px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 2.5px solid #334155;
  border-radius: 14px;
  box-shadow: 0 5px 0 #000;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  box-sizing: border-box;
}

.b-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 0 #000, 0 0 14px rgba(255, 230, 0, 0.45);
  border-color: #ffe600;
}

.b-card:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #000;
}

.b-card.in-squad {
  border: 2.5px solid #ffe600;
  box-shadow: 0 5px 0 #000, 0 0 12px rgba(255, 230, 0, 0.35);
  background: linear-gradient(180deg, #243046 0%, #111a2a 100%);
}

.b-card-element-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1.5px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  z-index: 5;
  background: #334155;
}

.b-card-element-tag.elem-fire  { background: #ef4444; }
.b-card-element-tag.elem-water { background: #3b82f6; }
.b-card-element-tag.elem-wind  { background: #10b981; }
.b-card-element-tag.elem-earth { background: #d97706; }
.b-card-element-tag.elem-light { background: #facc15; color: #000; }
.b-card-element-tag.elem-dark  { background: #7c3aed; }

.b-card-lvl-tag {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10px;
  color: #fcd34d;
  background: rgba(0, 0, 0, 0.6);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #000;
}

.b-card-avatar {
  margin-top: 14px;
  width: 90px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.b-card-canvas {
  width: 90px;
  height: 80px;
}

.b-card-info-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.b-card-name {
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
}

.b-card-power-pill {
  font-size: 10px;
  color: #94a3b8;
  background: #020617;
  padding: 1px 8px;
  border-radius: 8px;
  border: 1px solid #1e293b;
}

/* ==========================================================================
   招式施放特效預覽視窗 (FX PREVIEW MODAL)
   ========================================================================== */
.fx-preview-modal {
  position: relative;
  width: 580px;
  max-width: 92vw;
  background: #090d16;
  border: 3.5px solid #ffe600;
  border-radius: 16px;
  box-shadow: 0 0 50px rgba(255, 230, 0, 0.3), 0 10px 0 #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalPop 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.fx-modal-header {
  padding: 12px 18px;
  background: #111827;
  border-bottom: 2px solid #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fx-canvas-wrap {
  width: 100%;
  height: 320px;
  background: radial-gradient(circle at center, #1e1b4b 0%, #060913 75%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.fx-preview-canvas {
  width: 540px;
  height: 300px;
  background: transparent;
}

.fx-info-footer {
  padding: 14px 18px;
  background: #0f172a;
  border-top: 2px solid #000;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* hidden 必須優先於模式卡片的 flex 排版。 */
.game-mode-card-btn[hidden] {
  display: none;
}

/* 主選單功能入口使用 DOM，位置不依賴 Canvas 邏輯座標。 */
.main-utility-menu {
  position: absolute;
  right: 0;
  bottom: 128px;
  display: grid;
  gap: 10px;
  width: 180px;
  pointer-events: auto;
}
.main-utility-btn {
  justify-content: space-between;
  min-height: 42px;
  font: 800 15px system-ui, "Segoe UI", sans-serif;
  color: #fff;
}
.main-utility-btn span { font-size: 12px; }
.main-utility-btn:focus-visible { outline: 3px solid #ffe600; outline-offset: 3px; }
@media (max-width: 600px) {
  .main-utility-menu {
    left: 0;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* 設定與進度內頁：原生 HTML 版面，與戰場 Canvas 尺寸無關。 */
/* 視覺直接共用名冊的 overlay / window / header / close 類別。 */
.menu-panel-overlay { color: #f8fafc; }
.menu-panel-header { flex-shrink: 0; gap: 16px; }
.menu-panel-header > div { min-width: 0; }
.menu-panel h2 { font-size: 22px; }
.menu-panel h3 { font-size: 16px; }
.menu-panel p { line-height: 1.6; }
.menu-panel-header p, .panel-note { color: #94a3b8; font-size: 13px; }
.menu-panel-content { flex: 1; padding: 20px 24px; overflow: auto; min-height: 0; overscroll-behavior: contain; }
.menu-panel footer { padding: 10px 24px; border-top: 2px solid #000; font-size: 12px; color: #94a3b8; }
.menu-panel button:not(.btn-close-modal) { justify-content: center; min-height: 36px; font: 800 14px system-ui, "Segoe UI", sans-serif; }
.menu-panel button[aria-pressed="true"]:not(.btn-close-modal) { border-color: #ffe600; box-shadow: 0 4px 0 #000, 0 0 12px rgba(255, 230, 0, 0.35); }
.menu-panel button:disabled { opacity: 0.45; cursor: default; }
.menu-panel button:focus-visible, .menu-panel input:focus-visible { outline: 3px solid #ffe600; outline-offset: 3px; }
.settings-list { max-width: 720px; margin: auto; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; padding: 14px 0; border-bottom: 1px solid #334155; }
.settings-row small { display: block; color: #94a3b8; margin-top: 4px; font-size: 12px; }
.settings-control { display: flex; align-items: center; gap: 12px; }
.settings-control input { width: clamp(100px, 20vw, 230px); accent-color: #38bdf8; }
.settings-control output { width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.settings-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: #38bdf8; }
.menu-panel button.danger-btn:not(.btn-close-modal) { background: linear-gradient(180deg, #ef4444, #b91c1c); }
.panel-balance { color: #ffe600; font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.panel-note { margin: 8px 0 16px; }
.panel-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.panel-card { width: auto; height: auto; min-height: 120px; padding: 16px; align-items: stretch; cursor: default; }
.panel-card p { margin: 8px 0 16px; font-size: 13px; color: #94a3b8; white-space: pre-line; }
.panel-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.panel-tabs, .panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.unknown-card { display: grid; place-items: center; min-height: 120px; color: #64748b; font-size: 32px; }
.achievement-list { display: grid; gap: 10px; }
.achievement-list progress { width: 100%; height: 12px; accent-color: #38bdf8; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 10px 24px; }
.stats-grid > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #334155; }
.stats-grid dd { font-weight: 700; }
.keybind-table { width: 100%; max-width: 920px; margin: 0 auto 20px; border-collapse: collapse; }
.keybind-table th, .keybind-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #334155; }
.keybind-table { table-layout: fixed; }
.keybind-table th:first-child { width: 14%; }
.keybind-table th:nth-child(2) { width: 10%; }
.keybind-table th:nth-child(n+3) { width: 38%; }
.keybind-table th { white-space: nowrap; }
.keybind-table button { width: 100%; }
@media (max-width: 600px) {
  .menu-panel-header { padding: 0 16px; }
  .menu-panel-content { padding: 16px; }
  .settings-row { gap: 12px; flex-wrap: wrap; }
  .settings-control input { width: 140px; }
  .panel-card-bottom { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .keybind-table th, .keybind-table td { padding: 8px 4px; }
}
/* 新冒險入口與即時配招；不依賴 Canvas 點擊區域。 */
.adventure-selection { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:20px; align-items:start; }
.adventure-roster { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px; }
.menu-panel button.adventure-character { display:flex; flex-direction:column; align-items:center; padding:8px; min-height:116px; }
.adventure-character canvas { width:90px; height:80px; }
.menu-panel button.adventure-character.selected { border-color:#facc15; box-shadow:0 4px 0 #000,0 0 0 2px #facc15; }
.adventure-detail { position:sticky; top:0; }
.adventure-menu-button { position:absolute; top:18px; right:18px; z-index:20; padding:12px 18px; cursor:pointer; }
.adventure-menu-button[hidden] { display:none; }
.adventure-live-panel { background:transparent!important; backdrop-filter:none!important; pointer-events:none; justify-content:flex-end!important; padding:12px; }
.adventure-live-panel .menu-panel { pointer-events:auto; width:min(440px,90vw); height:calc(100dvh - 24px); max-height:calc(100dvh - 24px); margin:0; }
@media(max-width:700px) { .adventure-selection {grid-template-columns:1fr;} .adventure-detail {position:static;} }
.adventure-team-panel .menu-panel { width:min(1040px,calc(100vw - 32px)); }
.adventure-team-panel .adventure-roster { grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); }
.adventure-team-panel .adventure-character { min-height:155px; }
.adventure-team-panel .adventure-character span { font-size:12px; }
.adventure-team-panel .adventure-character.unowned { background:#263043; color:#a6b2c6; }
.adventure-team-panel .unowned canvas { opacity:.45; filter:grayscale(.7); }
.adventure-team-panel [data-portrait] { width:90px; height:80px; }

/* First chapter: plain surfaces, readable objective and contextual interactions. */
.adventure-journey { position:absolute; inset:0; pointer-events:none; z-index:15; color:#343b35; font:14px system-ui,"Microsoft JhengHei",sans-serif; }
.adventure-journey[hidden] { display:none; }
.journey-summary { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:min(440px,38vw); padding:10px 16px; background:rgba(255,255,255,.94); border:1px solid #d6d2c7; border-radius:4px; box-shadow:0 3px 12px #1818180d; }
.journey-summary strong { font-size:17px; }
.journey-summary p { margin:4px 0; font-size:12px; line-height:1.5; }
.journey-summary [data-progress] { color:#647d66; font-weight:700; }
.journey-summary details { pointer-events:auto; font-size:12px; }
.journey-summary summary { cursor:pointer; color:#77756c; }
.journey-team { position:absolute; left:18px; top:190px; display:flex; flex-direction:column; gap:5px; max-height:32%; overflow:auto; }
.journey-team span { background:rgba(255,255,255,.88); padding:5px 9px; border-radius:4px; font-size:12px; }
.journey-team .journey-downed { color:#9a4b3d; }
.journey-actions { position:absolute; bottom:146px; left:50%; transform:translateX(-50%); width:min(650px,65vw); display:flex; flex-wrap:wrap; justify-content:center; gap:6px; pointer-events:auto; }
.journey-actions button { padding:9px 14px; border:1px solid #9cab95; border-radius:4px; background:#fffef9; color:#343b35; font:600 13px system-ui,"Microsoft JhengHei",sans-serif; cursor:pointer; touch-action:none; }
.journey-actions button:hover:not(:disabled) { background:#e5ecdf; }
.journey-actions button:focus-visible { outline:2px solid #647d66; outline-offset:2px; }
.journey-actions button:disabled { color:#77756c; border-color:#d2cec3; background:#f5f3edeb; cursor:default; }
.journey-actions small { flex-basis:100%; text-align:center; background:#fffef9e8; padding:5px; border-radius:4px; font-size:12px; }
@media(max-width:700px) { .journey-summary { top:100px; width:54vw; } .journey-actions { bottom:130px; width:72vw; } .journey-team { top:235px; max-width:25vw; } }