/* 組牌工具專用樣式 */

:root {
    /* 卡片以「完整卡面」呈現，比例固定為實體卡的 63:88。
       比例一律用 padding-top（88 ÷ 63 = 139.68%）撐高度，不用 aspect-ratio。 */
    --db-card-w: 132px;
    --db-card-pad: 139.68%;
    --db-deck-card-w: 96px;
}

/* 這頁也載入 main.css（為了 .modal 等共用樣式），但 main.css 的 body 是為 3D 棋盤設計的：
   perspective 會讓 position:fixed 改以 body 為包含塊，flex 置中也不是這頁要的版面。 */
body {
    perspective: none;
    display: block;
    align-items: initial;
    justify-content: initial;
    height: auto;
    overflow: auto;
}

.deckbuilder-container {
    /* dvh 排在 vh 後面覆蓋掉：手機瀏覽器的 100vh 常是地址列收起後才有的
       最大值，容器背景至少要蓋到「當下真正看得到」的那塊。
       曾經在這裡加過 display:flex;flex-direction:column，讓 main 用
       flex:1 自動算「容器高度減掉 header 高度」，省得像桌機那樣寫死扣
       56px。但這個 flex-column 外殼實測會讓 .deckbuilder-main 在內容
       （卡片庫/牌組編輯器兩塊地板加起來，通常超過一個螢幕）比
       min-height:100dvh 更高時被反過來壓縮回一個螢幕高，子層視覺上溢出
       但 document.scrollHeight 量到的還是一個螢幕，完全捲不到溢出的部分
       ——flex-shrink 開了幾層都沒用，問題出在 container 本身只有
       min-height、被當成「先假設剛好一個螢幕」的起點在跑 flex 版面。
       手機版的 main 其實不需要「自動填滿容器剩餘高度」這件事——
       .card-collection/.deck-editor 兩塊各自有自己的 vh + min-height 地板
       （見下面 1200px 斷點），本來就不依賴 main 幫忙分配空間。改回單純的
       block 容器，讓內容多高、頁面就多高，跟桌機原本 calc(100vh-56px)
       那條路徑互不影響。 */
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.deckbuilder-header {
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.deckbuilder-header h1 {
    color: #2d3748;
    font-size: 1.3em;
    margin: 0;
}

.nav-buttons {
    display: flex;
    gap: 8px;
}

.nav-btn {
    padding: 7px 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    background: #e2e8f0;
    color: #2d3748;
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background: #cbd5e0;
}

.nav-btn.primary {
    background: #4299e1;
    color: white;
}

.nav-btn.primary:hover {
    background: #3182ce;
}

/* 低視覺權重：跟 nav-btn 放同一列但不做成按鈕，才不會在手機上擠爆已經很滿的標題列 */
.legal-link {
    font-size: 0.75em;
    color: #94a3b8;
    text-decoration: none;
    white-space: nowrap;
}

.legal-link:hover {
    text-decoration: underline;
}

.deckbuilder-main {
    display: flex;
    height: calc(100vh - 56px);
    gap: 12px;
    padding: 12px;
}

/* 左側卡片庫 */
.card-collection {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    padding: 12px 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.collection-header {
    margin-bottom: 8px;
}

.collection-header h3 {
    /* 版面已經很清楚左邊是卡片庫，標題只佔空間 */
    display: none;
}

/* 搜尋 + 作品分類 + 三個篩選排成一列，省下三行高度 */
.search-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.search-input {
    flex: 1 1 200px;
    min-width: 160px;
    padding: 8px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95em;
    transition: border-color 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: #4299e1;
}

/* 注意：這幾條原本被誤寫成巢狀在 .filter-row 裡（`.filter-row { .series-tabs {…} }`），
   瀏覽器支援 CSS 巢狀後就變成「只在 .filter-row 內生效」，但 .series-tabs 是它的兄弟節點，
   結果整組作品分類的樣式都沒套上。這裡拆回同層。 */
.series-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 240px;
    min-width: 200px;
}

.series-tab-label {
    font-size: 0.85em;
    color: #4a5568;
    font-weight: 600;
    white-space: nowrap;
}

.series-tab-select {
    flex: 1;
    min-width: 140px;
    padding: 8px 10px;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    font-size: 0.9em;
    color: #2d3748;
    background: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.series-tab-select:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.25);
}

.filter-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.filter-select {
    min-width: 96px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    font-size: 0.85em;
}

.cards-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--db-card-w), 1fr));
    align-content: start;
    gap: 8px;
    overflow-y: auto;
    padding: 8px 2px;
}

.empty-result {
    grid-column: 1 / -1;
    background: #f7fafc;
    border: 1px dashed #cbd5e0;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    color: #4a5568;
    font-size: 0.9em;
}

.empty-result p + p {
    margin-top: 8px;
}

.empty-result .nav-btn {
    margin-top: 6px;
}

/* 卡片庫目前顯示範圍（卡片是按需載入的，這行說明現在看到的是哪些） */
.collection-status {
    padding: 6px 12px;
    font-size: 0.78em;
    color: #718096;
    border-bottom: 1px solid #e2e8f0;
    background: #f7fafc;
}

.collection-status:empty {
    display: none;
}

.loading-result {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 25px;
    color: #4a5568;
    font-size: 0.9em;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #cbd5e0;
    border-top-color: #4299e1;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 右側牌組編輯器 */
/* 牌組編輯器＝一條收合鈕（.deck-editor-toggle）＋內容（.deck-editor-body）。
   桌機版跟對戰畫面的戰鬥紀錄同一套互動：收起來只留箭頭，讓卡池吃回讓出的寬度。
   position:relative 不是必要的（toggle 走正常流排在 body 左邊，不是絕對定位），
   純粹是 overflow:hidden 收合時裁切內容用。 */
.deck-editor {
    position: relative;
    /* 原本 clamp(300px,26vw,420px) 在 1280 寬只給 332.8px，扣掉收合鈕(20)與
       內距(28) 之後牌組清單只剩 284.8px——差 3px 排不下第 3 欄（3×96+12=300），
       只剩 2 欄。加寬到能穩定排下 4 欄：4×96 + 3×6 = 402，加回 48 → 450px 起跳。 */
    flex: 0 0 clamp(360px, 38vw, 520px);
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    min-width: 0;
    overflow: hidden;
    transition: flex-basis 0.18s ease;
}

.deck-editor-toggle {
    flex: 0 0 20px;
    align-self: stretch;
    border: none;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px 0 0 10px;
    background: rgba(0, 0, 0, 0.04);
    color: #4a5568;
    cursor: pointer;
    font-size: 0.85em;
    line-height: 1;
    padding: 0;
}
.deck-editor-toggle:hover { background: rgba(0, 0, 0, 0.09); }

.deck-editor-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    overflow: hidden;
}

/* 收合：body 完全藏起來，editor 縮到只剩 toggle 那條窄邊。
   限定桌機（橫排）版面——直式手機兩塊是上下疊，「收合成一條」的概念不適用，
   toggle 本身也在下面的 1200px 斷點裡被隱藏，這裡多一層 min-width 保險，
   免得 class 沒清掉就跨了斷點時兩邊打架。 */
@media (min-width: 1201px) {
    .deck-editor.collapsed {
        flex-basis: 20px;
    }
    .deck-editor.collapsed .deck-editor-body {
        display: none;
    }
}

.deck-header {
    margin-bottom: 8px;
}

.deck-header h3 {
    color: #2d3748;
    font-size: 1.05em;
    margin-bottom: 6px;
}

.deck-stats {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-weight: bold;
    font-size: 0.85em;
    white-space: nowrap;
}

.db-total-count {
    color: #4299e1;
}

/* 限定生命觸發計數（SPECIAL／COLOR／FINAL 各上限 4 張） */
.deck-triggers {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.78em;
    font-weight: bold;
    white-space: nowrap;
    color: #718096;
}

.db-trigger.over-limit {
    color: #e53e3e;
}

.deck-validation {
    font-size: 0.9em;
    margin-top: 10px;
}
/* 張數沒到 50/3 的訊息被 JS 濾掉後，牌組本來就合法的情況下這裡完全空著——
   :empty 收掉 margin-top，省下的空間讓 .deck-list（flex:1）多分一點高度，
   不留一條沒內容的空白帶。 */
.deck-validation:empty {
    display: none;
}

.deck-validation.valid {
    color: #38a169;
}

.deck-validation.invalid {
    color: #e53e3e;
}

.saved-decks-panel {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.saved-decks-panel label {
    display: block;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 5px;
    font-size: 0.85em;
}

.saved-decks-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.saved-decks-select {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #cbd5f5;
    border-radius: 6px;
    background: white;
    color: #2d3748;
    font-size: 0.9em;
    min-height: 38px;
}

.saved-decks-select:disabled {
    background: #edf2f7;
    color: #a0aec0;
    cursor: not-allowed;
}

.saved-decks-controls .action-btn {
    white-space: nowrap;
    padding: 8px 14px;
}

.deck-tabs {
    display: flex;
    margin-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
}

.deck-tab {
    flex: 1;
    padding: 6px 3px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.8em;
    color: #718096;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.deck-tab.active {
    color: #4299e1;
    border-bottom-color: #4299e1;
}

.deck-tab:hover {
    color: #2d3748;
}

/* 牌組同樣以卡面呈現：原本 40×60 的裁切縮圖根本看不出是哪張卡 */
.deck-list {
    flex: 1;
    display: grid;
    /* 用「固定欄寬」而不是 minmax(...,1fr)。1fr 會把欄數塞不下時多出來的寬度
       全部拉到卡片上：實測 284.8px 寬只排得下 2 欄，每張被拉到 130.9px 寬、
       182.8px 高，清單高 299px 連第二列都看不到。更糟的是它不單調——寬度加大
       但還沒跨過下一個欄數門檻時，卡片只會變得更高、可見列數反而更少。
       固定欄寬讓卡片尺寸恆定（96×134），列數就只跟清單高度有關，可預測。
       多出來的寬度留白，不去拉伸卡片。 */
    grid-template-columns: repeat(auto-fill, var(--db-deck-card-w));
    justify-content: start;
    align-content: start;
    gap: 6px;
    overflow-y: auto;
    margin-bottom: 10px;
    padding-right: 2px;
}

.empty-deck {
    grid-column: 1 / -1;
    text-align: center;
    color: #718096;
    margin-top: 40px;
    font-size: 0.9em;
}

.deck-card-item {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: var(--db-card-pad);
    border-radius: 5px;
    overflow: hidden;
    background: #edf2f7;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.deck-card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.deck-card-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.deck-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 卡名等文字資訊在卡面上就有，這裡只留張數與加減按鈕 */
.deck-card-info {
    display: none;
}

.deck-card-count {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    padding: 2px 3px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.78) 45%);
}

.deck-card-count .count-number {
    flex: 1;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.deck-card-count .count-btn {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.deck-card-item:hover .count-btn {
    opacity: 1;
}

.deck-card-count .count-btn:hover {
    background: rgba(255, 255, 255, 0.45);
}

/* 觸控裝置沒有 hover，按鈕直接顯示 */
@media (hover: none) {
    .deck-card-count .count-btn {
        opacity: 1;
    }
}

/* 滑鼠移過去的大圖預覽：固定定位掛在 body，才不會被捲動容器裁切。
   class 名稱刻意不叫 card-hover-preview —— main.css 已經有同名的盤面預覽樣式
   （帶 translate(-50%,-50%) scale(.8)），撞名會讓這裡的尺寸與位置整個跑掉。 */
.db-card-preview {
    position: fixed;
    z-index: 5000;
    /* 固定定位的包含塊是視窗，padding-top 百分比會以視窗寬度計算（會變超長），
       所以這裡直接寫死尺寸：280 × 88 ÷ 63 ≒ 391 */
    width: 280px;
    height: 391px;
    border-radius: 10px;
    overflow: hidden;
    background: #1a202c;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.db-card-preview.visible {
    opacity: 1;
}

.db-card-preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.deck-card-count {
    display: flex;
    align-items: center;
    gap: 8px;
}

.count-btn {
    width: 25px;
    height: 25px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    transition: all 0.3s ease;
}

.count-btn:hover {
    background: #f7fafc;
    border-color: #4299e1;
}

.count-number {
    min-width: 20px;
    text-align: center;
    font-weight: bold;
    color: #2d3748;
}

.deck-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.action-btn {
    flex: 1;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.3s ease;
    background: #e2e8f0;
    color: #2d3748;
}

.action-btn:hover {
    background: #cbd5e0;
}

.action-btn.primary {
    background: #4299e1;
    color: white;
}

.action-btn.primary:hover {
    background: #3182ce;
}

.action-btn.danger {
    background: #fed7d7;
    color: #e53e3e;
}

.action-btn.danger:hover {
    background: #feb2b2;
}

/* 卡片樣式覆蓋 */
/* 卡片＝完整卡面。卡面本身已經印了名稱／費用／BP，不再另外疊文字欄位，
   細節交給 hover 放大預覽與點擊後的詳細視窗。

   高度用 padding-top 撐開而不是 aspect-ratio：aspect-ratio 搭配「子元素高度 100%」
   在部分瀏覽器不會產生實際高度，格子會塌成一條，卡圖就整片疊在一起。 */
.collection-card {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: var(--db-card-pad);
    background: #edf2f7;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease, outline-color 0.15s ease;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.collection-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    outline-color: #4299e1;
}

/* 已在牌組中的卡：直接在卡片庫標出張數，不用來回對照右側 */
.collection-card.in-deck::after {
    content: attr(data-in-deck);
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: rgba(66, 153, 225, 0.95);
    color: white;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* 卡片本身是 padding-top 撐出來的比例盒，圖片用絕對定位填滿 */
.card-image-small {
    position: absolute;
    inset: 0;
    background: #f7fafc;
    overflow: hidden;
}

.card-image-small img {
    width: 100%;
    height: 100%;
    /* contain：完整卡面不裁切（cover 會把卡名與效果框切掉） */
    object-fit: contain;
    display: block;
}

.lazy-image {
    opacity: 0;
    transition: opacity 0.2s ease;
    display: block;
}

.lazy-image.is-loaded {
    opacity: 1;
}

@keyframes shimmer-loading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.card-image-small.loading,
.deck-card-image.loading,
.card-image-large.loading {
    background-color: #f7fafc;
    background-image: linear-gradient(90deg, rgba(226, 232, 240, 0) 0%, rgba(203, 213, 224, 0.85) 50%, rgba(226, 232, 240, 0) 100%);
    background-size: 200% 100%;
    animation: shimmer-loading 1.2s ease-in-out infinite;
}

.card-image-small.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #718096;
    font-size: 0.6em;
}

/* 舊版在卡片下方另外排名稱／費用／稀有度／AP・BP，既佔空間又和卡面資訊重複。
   卡面本身就有這些資訊，這裡一律隱藏，只保留無圖時的替代文字。 */
.collection-card .card-name,
.collection-card .card-cost,
.collection-card .card-rarity,
.collection-card .card-stats {
    display: none;
}

/* 沒有圖的卡（少數特典）用卡名頂替，才不會是一片空白 */
.collection-card:has(.card-image-small.placeholder) .card-name {
    display: block;
    position: absolute;
    inset: auto 4px 6px 4px;
    font-size: 11px;
    font-weight: 700;
    color: #2d3748;
    text-align: center;
    line-height: 1.25;
}

/* 卡片詳細資訊彈窗 */
.card-detail-content {
    max-width: min(800px, 100%);
    width: 100%;
    position: relative;
}

.card-detail {
    display: flex;
    gap: clamp(16px, 3vw, 30px);
    /* 視窗窄的時候讓右側資訊掉到圖片下方，而不是把彈窗撐破 */
    flex-wrap: wrap;
}

/* 卡圖 + 「加入牌組」的左欄：按鈕要緊貼在卡圖下方，
   不能留在右側資訊欄的最底下（長效果文字會把它推到要捲動才看得到） */
.card-detail-figure {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* 固定 300px 在窄視窗會擠爆右側欄；改成隨彈窗寬度伸縮 */
    width: clamp(160px, 36%, 300px);
    flex-shrink: 0;
    /* 不加會被 flex 的 stretch 拉長 */
    align-self: flex-start;
}

.card-image-large {
    position: relative;
    width: 100%;
    aspect-ratio: 63 / 88;
    background: #f7fafc;
    border-radius: 10px;
    overflow: hidden;
}

.card-image-large img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* 詳細視窗要看清楚整張卡，不能像原本那樣 cover 裁掉邊 */
    object-fit: contain;
}

.card-info {
    flex: 1;
    /* flex 子項預設 min-width:auto，長效果文字會把欄位推寬、連帶撐破彈窗 */
    min-width: min(260px, 100%);
    display: flex;
    flex-direction: column;
}

/* 關閉鈕原本沒有任何樣式（等於看不見也按不到）；
   彈窗現在會捲動，所以讓它固定黏在右上角 */
.card-detail-content .close {
    position: sticky;
    top: 0;
    float: right;
    z-index: 2;
    width: 32px;
    height: 32px;
    margin: -8px -8px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    color: #94a3b8;
    background: rgba(15, 23, 42, .85);
    border-radius: 50%;
    cursor: pointer;
    transition: all .15s ease;
}

.card-detail-content .close:hover {
    color: #f1f5f9;
    background: #334155;
}

/* 手機／很窄的視窗：圖片與資訊改成上下堆疊 */
@media (max-width: 640px) {
    .card-detail {
        flex-direction: column;
        align-items: center;
    }

    .card-detail-figure {
        width: min(260px, 70%);
        align-self: center;
    }

    .card-info {
        min-width: 0;
        width: 100%;
    }
}

/* 詳細視窗底色是深色（main.css 的 .modal-content），
   底下的文字一律用淺色，不要沿用淺底時代的深灰。 */
.card-info h2 {
    color: #f1f5f9;
    margin-bottom: 20px;
    font-size: 1.8em;
}

.detail-stats {
    margin-bottom: 20px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.stat-label {
    font-weight: bold;
    color: #94a3b8;
}

.card-abilities {
    margin-bottom: 15px;
}

.card-abilities h4 {
    color: #94a3b8;
    margin-bottom: 8px;
}

.ability-tag {
    display: inline-block;
    background: #4299e1;
    color: white;
    padding: 4px 8px;
    border-radius: 15px;
    font-size: 0.8em;
    margin-right: 8px;
    margin-bottom: 5px;
}

.card-description {
    background: #f7fafc;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #4299e1;
    margin-bottom: 20px;
}

.effect-scroll {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 8px;
    margin-bottom: 10px;
}

.effect-scroll p {
    margin: 0;
    line-height: 1.6;
    color: #e2e8f0;
}

.effect-scroll::-webkit-scrollbar {
    width: 6px;
}

.effect-scroll::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 4px;
}

.effect-scroll::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.45);
    border-radius: 4px;
}

.effect-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.7);
}

.effect-list {
    list-style: disc inside;
    margin: 0;
    padding-left: 0;
}

.effect-list li {
    margin-bottom: 6px;
    line-height: 1.5;
    color: #e2e8f0;
}

.icon-token {
    display: inline-flex;
    align-items: center;
    background: rgba(56, 189, 248, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.45);
    color: #7dd3fc;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75em;
    margin: 0 4px;
    letter-spacing: 0.05em;
}

.card-traits {
    margin-bottom: 10px;
}

.card-meta {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: 0.85em;
    color: #cbd5e1;
    line-height: 1.5;
}

.card-meta a {
    color: #38bdf8;
    text-decoration: none;
}

.card-meta a:hover {
    text-decoration: underline;
}

.modal-actions {
    display: flex;
    gap: 10px;
}

.card-detail-figure .modal-actions {
    margin-top: 0;
}

.card-detail-figure .modal-actions .action-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.95em;
}

/* 響應式設計 */
@media (max-width: 1200px) {
    /* 桌機是「.deckbuilder-main 固定 calc(100vh-56px)，橫排兩欄各憑桌機的
       flex-basis 決定寬度」；直排（column）時主軸換成高度，如果只加
       height:60vh／40vh 而不動 flex-basis，會變成「同一個主軸尺寸被
       flex-basis 與 height 兩邊搶」，算出來的結果隨瀏覽器引擎而異
       （實測 Chromium：.card-collection 沒理會 60vh，繼續吃 grow:1 的
       「剩餘空間」；.deck-editor 卡在 300px 的 flex-basis 與 337.6px 的
       height 中間，兩個都不是）。 */
    /* .deckbuilder-container 已經不是 flex 容器（見上面的說明），
       .deckbuilder-main 在這裡只需要維持「直排」讓卡片庫疊在牌組編輯器
       上面；高度交給內容自然撐開，不再用 flex-grow 去填滿誰。 */
    .deckbuilder-main {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    /* 收合鈕是桌機（橫排）版面專屬的互動：直式手機兩塊是上下疊，
       「收合成一條窄邊」的概念不適用。藏起來就好，.deck-editor-body
       會自動撐滿（見 CSS 說明），不需要額外處理 flex-direction。 */
    .deck-editor-toggle {
        display: none;
    }

    /* 曾經改成 flex-grow 6:4 分配，但實測發現兩塊的 min-height 地板一起
       生效時，.card-collection 幾乎沒有機會分到明顯超過自己地板的空間——
       扣掉搜尋列／作品分類／篩選（~230px）之後卡片格只剩不到 250px，
       等於「只有一整排」（3 欄 × 1 排＝3 張），玩家的感受是「以前一次
       看得到很多張，現在只剩 3 張」。兩塊改回各自獨立用 vh 當建議值、
       min-height 當地板——不再共搶同一份「剩餘空間」，flex-basis 已經是
       auto（不會再跟桌機的寬度設定打架），vh/dvh 可以乾淨地生效。 */
    .card-collection {
        flex: 0 0 auto;
        height: 65vh;
        height: 65dvh;
        /* 230px 固定內容（搜尋列＋作品分類＋三個篩選＋狀態列）+ 兩整排卡
           （132px 格寬 → 約 184px／排）+ 排間距，保底至少看得到兩排 */
        min-height: 600px;
    }

    .deck-editor {
        flex: 0 0 auto;
        max-width: none;
        height: 40vh;
        height: 40dvh;
        /* 480px 地板量出來剛好卡在「固定內容(~339px) + 一整排牌組卡(~141px)」，
           玩家一次只看得到 2~3 張自己牌組裡的卡，很難確認整副牌組放了什麼。
           拉高到兩整排（339 + 134*2 + 6 間距 ≈ 613px，取整數留一點餘裕）。 */
        min-height: 620px;
    }

    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

@media (max-width: 768px) {
    /* 標題／導覽按鈕／登入狀態三塊被拆成三整行，但後兩塊都不寬，
       沒理由各佔一行。拿掉 column，改用 h1 flex-basis:100% 逼標題
       自己換行，.nav-buttons 與 .ua-auth-row 就會排進標題後面那一行——
       擠不下才各自換行，不是預先寫死拆開。 */
    .deckbuilder-header {
        justify-content: center;
        gap: 6px 8px;
        padding: 8px 8px;
    }

    .deckbuilder-header h1 {
        flex: 1 1 100%;
        text-align: center;
        font-size: 1.05em;
    }

    /* 純粹逼標題換行還不夠：三顆導覽按鈕＋姓名＋登出鈕的原尺寸加起來
       在 375~430px 手機上還是會超寬，一樣會被擠到折成兩行。縮小按鈕
       本身，兩塊才擠得進同一行。 */
    .nav-buttons { gap: 5px; }
    .nav-btn { padding: 6px 7px; font-size: 0.76em; }
    .ua-auth-row { font-size: 0.74em; gap: 5px; }

    /* 所有類型／所有顏色／所有稀有度：三個都是短字，拆成三行反而在窄
       螢幕上占最多版面。改回橫排，各分 1/3 寬，縮小 padding/字級讓
       三個擠得進一行（min-width:auto 不夠——那只是拿掉下限，
       flex-direction:column 才是真正把它們拆開的原因）。 */
    .filter-row {
        flex-wrap: nowrap;
    }

    .filter-select {
        flex: 1 1 0;
        min-width: 0;
        padding: 6px 4px;
        font-size: 0.78em;
    }

    /* 卡圖欄（含「加入牌組」）在窄視窗改成置中的單欄；
       尺寸交給上面 640px 斷點的 .card-detail-figure，這裡不再寫死
       width/height，否則會蓋掉 aspect-ratio 讓按鈕與卡圖對不齊 */
    .card-detail {
        flex-direction: column;
        align-items: center;
    }

    .card-detail-figure {
        margin: 0 auto;
    }
}