/* 桌機版面（v4.4，使用者 11/3）：戰鬥區縮小、把空間讓給右側操作頁面；超寬螢幕右側卡片排成兩欄
 * 獨立檔案放在 style.css 之後載入（不動其他協作者正在改的 style.css）。 */
@media (min-width: 900px) {
  .left { width: 44%; min-width: 420px; max-width: 760px; }
  .right { flex: 1; }
}
@media (min-width: 1400px) { .left { width: 38%; max-width: 760px; } }
@media (min-width: 1700px) { .left { width: 34%; max-width: 780px; } }
/* 角色頁（v7.3.4）：明確左右兩欄——左＝戰力／配點／數值，右＝裝備／配置／夥伴；
   原本用 column-count，面板高度固定時多出的卡片被擠到看不到的第 3、4 欄（負責人：電腦版看不到配點） */
.hero-cols { display: flex; flex-direction: column; }
.hero-cols > .hc-l, .hero-cols > .hc-r { display: contents; }
@media (min-width: 1500px) {
  .hero-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 16px; align-items: start; }
  .hero-cols > .hc-l, .hero-cols > .hc-r { display: block; min-width: 0; }
}
/* 右側頁面在寬螢幕排成兩欄（只套用在「由多張獨立卡片組成」的分頁；背包、商店等格狀頁維持單欄） */
@media (min-width: 1500px) {
  .panel[data-tab="settings"], .panel[data-tab="rebirth"] { column-count: 2; column-gap: 16px; }
  .panel[data-tab] > * { break-inside: avoid; }
  .panel[data-tab] > h2, .panel[data-tab] > .subtabs, .panel[data-tab] > .note { column-span: all; }
}