/* ปุ่มพับ/กางแถบตัวกรอง: ใช้เฉพาะมือถือ (แสดงจริงใน responsive.css) */
#filterToggleBtn {
    display: none;
}

/* --- 1. Global Form Controls (ไม่กระทบโครงสร้างปุ่ม +- ในเด็ค) --- */
input, 
select, 
textarea {
    font-family: 'Kanit', sans-serif;
    outline: none;
    box-sizing: border-box;
}

/* ปรับแต่ง Input และ Select เฉพาะในแถบเครื่องมือ */
input, select {
    padding: 10px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
    background-color: #ffffff;
}

input:focus, select:focus {
    border-color: #ff9f43;
    box-shadow: 0 0 8px rgba(255, 159, 67, 0.2);
}

#searchInput {
            width: 100%; 
            height: 45px; /* เพิ่มความสูงให้กดง่าย */
            padding: 0 15px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(0, 0, 0, 0.4);
            color: #fff;
            font-size: 16px;
            font-family: 'Kanit', sans-serif;
            box-sizing: border-box; /* ป้องกันขอบล้น */
            transition: all 0.3s ease;
        }

        #searchInput:focus {
            background: rgba(0, 0, 0, 0.7);
            border-color: #ff9f43;
            outline: none;
            box-shadow: 0 0 10px rgba(255, 159, 67, 0.4);
        }

        /* จัดระเบียบปุ่ม Filter ด้านล่างให้เป็น Grid */
        .filter-grid {
            display: grid;
            /* เทคนิค Grid: จัด auto ตามความกว้างหน้าจอ (ขั้นต่ำ 140px ต่อช่อง) */
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
            gap: 10px;
            width: 100%;
        }

        /* สั่งให้ Dropdown และปุ่มทุกอันขยายเต็มช่อง Grid ของตัวเอง */
        .filter-grid select, 
        .filter-grid button {
            width: 100%;
            height: 42px;
            padding: 0 10px;
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.2);
            background: #1e272e;
            color: white;
            font-family: 'Kanit', sans-serif;
            font-size: 14px;
            cursor: pointer;
            transition: 0.3s;
            box-sizing: border-box;
        }

        .filter-grid select:hover {
            border-color: #ff9f43;
        }

        /* --- Multi-select dropdown (type / clan / rarity / set) --- */
        .multi-select {
            position: relative;
        }

        .multi-select-btn {
            width: 100%;
            height: 42px;
            padding: 0 10px;
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.2);
            background: #1e272e;
            color: white;
            font-family: 'Kanit', sans-serif;
            font-size: 14px;
            cursor: pointer;
            transition: 0.3s;
            box-sizing: border-box;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .multi-select-btn:hover {
            border-color: #ff9f43;
        }

        .multi-select.has-selection .multi-select-btn {
            border-color: #ffd900;
            color: #ffd900;
        }

        .multi-select-panel {
            display: none;
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            min-width: 100%;
            max-height: 260px;
            overflow-y: auto;
            background: #1e272e;
            border: 1px solid rgba(255, 217, 0, 0.4);
            border-radius: 6px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.4);
            z-index: 1001;
            padding: 6px;
        }

        .multi-select.open .multi-select-panel {
            display: block;
        }

        .multi-select-panel label {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 6px;
            border-radius: 4px;
            color: #e0e0e0;
            font-family: 'Kanit', sans-serif;
            font-size: 13px;
            white-space: nowrap;
            cursor: pointer;
        }

        .multi-select-panel label:hover {
            background: rgba(255, 159, 67, 0.15);
        }

        .multi-select-panel input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: #ffd900;
            flex-shrink: 0;
            cursor: pointer;
        }

/* --- 2. ปุ่มทั่วไป (ใช้คลาสเจาะจงเพื่อไม่ให้กระทบปุ่ม +- ในเด็ค) --- */
/* ปุ่มมาตรฐาน เช่น ปุ่มค้นหา หรือปุ่มอื่นๆ */
button:not(.qty-btn) {
    font-family: 'Kanit', sans-serif;
    background-color: #07357D;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    /* เพิ่ม Glow สีเหลืองจางๆ ในสภาวะปกติ */
    box-shadow: 0 0 10px rgba(255, 217, 0, 0.4);
}

button:not(.qty-btn):hover {
    font-family: 'Kanit', sans-serif;
    background-color: #ff9f43;
    transform: translateY(-2px);
    /* เพิ่ม Glow สีเหลืองให้เข้มและกว้างขึ้นเมื่อเอาเมาส์ชี้ */
    box-shadow: 0 0 20px rgba(255, 217, 0, 0.7), 0 4px 12px rgba(0,0,0,0.2);
}

/* --- 3. จัดการปุ่ม +- และตัวเลขในหน้าคลังการ์ด (Main Gallery) --- */
/* ใช้ .card-container นำหน้าเพื่อล็อคสไตล์เฉพาะหน้าคลัง */
.card-container .deck-item-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    gap: 10px;
}

.card-container .qty-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* ทรงกลมสวยงามสำหรับหน้าคลัง */
    background-color: #07357D;
    color: white;
    border: none;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.card-container .qty-btn:hover {
    background-color: #ff4757;
    transform: scale(1.1);
}

.card-container .qty-number {
    font-weight: bold;
    font-size: 18px;
    color: #323238;
    min-width: 30px;
    text-align: center;
}

/* --- 4. Card Grid & Layout --- */
.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 25px;
    padding: 10px;
}

.card {
    background: transparent;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

.card img {
    width: 100%;
    border-radius: 12px;
    display: block;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-10px) scale(1.05);
    z-index: 10;
}

.card:hover img {
    /* 1. เงาด้านล่าง (Shadow) เพื่อให้ดูการ์ดลอยขึ้น */
    /* 2. เงาสีทอง/ขาว รอบตัวการ์ด (Outer Glow) */
    box-shadow: 
        0 20px 30px rgba(0, 0, 0, 0.5),          /* เงาเข้มด้านล่าง */
        0 0 15px rgba(255, 217, 0, 0.6),        /* แสงสีทองชั้นใน */
        0 0 30px rgba(255, 217, 0, 0.3);        /* แสงสีทองฟุ้งๆ ชั้นนอก */
        
    transform: translateY(-5px);                /* ให้การ์ดขยับขึ้นเล็กน้อย */
    transition: all 0.1s ease-in-out;           /* ให้แสงค่อยๆ สว่างขึ้นอย่างนุ่มนวล */
    outline: 2px solid rgba(255, 217, 0, 0.8);  /* เพิ่มเส้นขอบบางๆ ให้ดูคม */
    outline-offset: -2px;                       /* ให้เส้นขอบอยู่ด้านในภาพนิดหน่อย */
    border-radius: 13px;                        /* ปรับให้เข้ากับทรงการ์ด */
}

.card-info {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    color: #323238;
    font-weight: 400;
}

/* --- 5. Pop-up (Modal) --- */
.modal {
    display: none; /* ซ่อนไว้เริ่มต้น (JS จะสั่งเป็น flex เมื่อเปิด) */
    position: fixed; 
    z-index: 1000; 
    left: 0; top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.85); 
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

/* ปุ่มปิดกากบาท */
.modal .close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
}

/* หน้ากากเนื้อหา - ปรับความสูงให้รูปมีที่ขยาย */
.modal-content-wrapper {
    background: white;
    display: flex;
    max-width: 900px;
    width: 100%;
    height: 80vh;      /* ล็อคความสูงไว้เพื่อให้รูปฝั่งซ้ายขยายตาม */
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* คอนเทนเนอร์ฝั่งรูปภาพ (ฝั่งซ้าย) */
.modal-img-side {
    flex: 1.2;          /* ให้พื้นที่รูปกว้างกว่า */
    background-color: #000; 
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* รูปภาพ - บังคับให้ขยายเต็มพื้นที่ที่มี */
#modalImg {
    width: 100%;
    height: 100%;
    object-fit: contain; /* ใช้ contain เพื่อให้เห็นครบทั้งใบ และขยายจนติดขอบด้านใดด้านหนึ่ง */
    display: block;
    /* กำหนดให้ค่า opacity มีการเปลี่ยนแปลงแบบนุ่มนวลในเวลา 0.25 วินาที */
    transition: opacity 0.25s ease-in-out; 
    /* ตั้งค่าเริ่มต้นให้มองเห็นชัดเจน */
    opacity: 1;
}

/* ฝั่งข้อมูล (ฝั่งขวา) */
.modal-info-side {
    flex: 1;
    padding: 30px;
    background: #fff;
    overflow-y: auto;
    color: #333;
}

/* สำหรับมือถือ */
@media (max-width: 768px) {
    .modal-content-wrapper {
        flex-direction: column;
        height: auto;
        max-height: 95vh;
    }
    .modal-img-side {
        width: 100%;
        height: 350px; /* บังคับความสูงรูปในมือถือ */
    }
    #modalImg {
        object-fit: contain;
    }
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}




/* 1. ต้องทำให้ตัวแม่ยอมให้ลูกลอยตัวได้ */
.content-area {
    display: block !important; /* เปลี่ยนจาก flex เป็น block เพื่อให้ sticky ทำงาน */
}

/* 2. กำหนดให้แถบคันหาลอยติดขอบบน */
.filter-section {
    width: 100% !important;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #F7F7FC; /* สีเดิมที่คุณต้องการ */
    padding: 15px 10px;
    margin: 0;
    border-bottom: 2px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    
    /* --- จุดที่แก้ไขเพื่อป้องกันการโดนบีบจนเละ --- */
    display: flex;
    flex-direction: column; /* จัดช่องค้นหาไว้บน Dropdown ไว้ล่าง */
    gap: 12px;             /* ระยะห่างระหว่างแถว */
    box-sizing: border-box;
    transition: padding 0.4s ease; /* ให้ขยับนุ่มนวลเวลา Side Panel เปิด */
}

/* ปรับให้ส่วนหัวเว็บบนสุดไม่ขยับ (ถ้ามี) หรือปรับตำแหน่งตามความเหมาะสม */
header {
    /* ถ้าคุณมี header ด้านบน filter-section อีกที 
       อาจจะต้องตั้ง position: sticky ให้มันด้วยเช่นกัน */
}

#cardContainer {
    padding-top: 20px; /* เพิ่มพื้นที่ด้านบนไม่ให้การ์ดชุดแรกจมหายไปใต้แถบคันหา */
}

/* Container จัดเรียงแนวนอน */

/* Container สำหรับ DP Filter (หลอดคริสตัล) */
.dp-filter-wrapper {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* จัดชิดซ้าย */
        }

.dp-crystal-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ดีไซน์ปุ่มวงกลมคริสตัล */
.dp-crystal-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%; /* ทำเป็นวงกลม */
    border: 2px solid #145a32; /* ขอบเขียวเข้ม */
    
    /* ไล่สีจากล่าง (เขียวเข้ม) ขึ้นบน (ขาว) ตามโจทย์ */
    background: linear-gradient(0deg, #0b3d0b 0%, #27ae60 60%, #ffffff 120%);
    
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 1px 1px 2px black; /* เงาตัวหนังสือให้อ่านง่ายบนสีขาว */
    
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
    /* Drop Shadow */
    box-shadow: 0 4px 6px rgba(0,0,0,0.5), inset 0 -3px 5px rgba(0,0,0,0.3);
    
    transition: all 0.2s ease;
    user-select: none;
}

/* สถานะเมื่อเอาเมาส์ชี้ */
.dp-crystal-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 10px rgba(46, 204, 113, 0.4); /* เรืองแสงสีเขียว */
}

/* สถานะเมื่อถูกเลือก (Active) */
.dp-crystal-btn.active {
    border: 2px solid #ffd900; /* ขอบทอง */
    box-shadow: 0 0 15px #ffd900; /* เรืองแสงทอง */
    transform: scale(1.15);
    background: linear-gradient(0deg, #1e8449 0%, #2ecc71 50%, #f1c40f 120%); /* เปลี่ยนสีเล็กน้อย */
}

/* ปุ่ม Reset (X) หรือ ไร้ DP */
.dp-crystal-btn.special {
    background: linear-gradient(0deg, #555 0%, #999 60%, #ccc 120%);
    border-color: #333;
}

/* Advanced Filter Modal — override modal-content-wrapper เดิม */
#advancedFilterModal .modal-content-wrapper {
    display: block !important;
    height: auto !important;
    max-width: 480px !important;
    width: 92% !important;
    background: #1a1a2e !important;
    border-radius: 12px !important;
    overflow: visible !important;
    padding: 0 !important; /* padding อยู่ใน div ข้างใน แล้วอยู่แล้ว */
}
/* =====================================================================
   Layout ใหม่ของแถบค้นหา (แนวเดียวกับเว็บ Battle of Talingchan)
   แถว 1 : [ช่องค้นหา + ปุ่มโหมดชื่อ/Effect] [ฟอร์แมต + โดนจำกัด]
   แถว 2 : ปุ่มเรียงตาม (เล็ก)
   แถว 3+: ตัวกรอง (เหมือนเดิม)
   ===================================================================== */

/* หัวเว็บ: ลดระยะห่างบนล่าง ไม่ให้กินจอเกินจำเป็น */
h1.main-title {
    padding: 14px 0 !important;
    margin-top: 6px !important;
    margin-bottom: 10px !important;
}

.search-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* ช่องค้นหา: ไม่ยืดยาวเกินจำเป็น (เพดาน 620px) ที่เหลือให้ฟอร์แมตมาต่อท้าย */
.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 360px;
    max-width: 620px;
    min-width: 0;
}
.search-box #searchInput {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

.format-box {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
}

.format-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #f1c40f;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
}

#banlistFormatSelect {
    height: 45px;
    min-width: 190px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.45);
    background: #1a1a1a;
    color: #fff;
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    cursor: pointer;
}
#banlistFormatSelect:hover,
#banlistFormatSelect:focus { border-color: #ff9f43; }

#limitedSearch {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 45px;
    padding: 0 12px;
    border-radius: 8px;
    border: 2px solid #1a4a9e;
    background: #07357D;
    color: #fff;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .2s;
}
#limitedSearch:hover { border-color: #ff9f43; }

/* --- ปุ่มสลับโหมด ดูการ์ด / จัดเด็ค --- */
.app-mode-switch {
    display: flex;
    flex: 0 0 auto;
    height: 45px;
    padding: 3px;
    gap: 3px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid #1a4a9e;
    box-sizing: border-box;
}
.app-mode-switch button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #aac4ff;
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.app-mode-switch button:hover { color: #ffffff; }
.app-mode-switch button.active[data-mode="browse"] {
    background: #07357D;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(255, 217, 0, 0.35);
}
.app-mode-switch button.active[data-mode="build"] {
    background: #28a745;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
}

/* หมายเหตุใน modal ตอนอยู่โหมดดูการ์ด (สถานะแบน/ลิมิตตามฟอร์แมต) */
.modal-browse-note {
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    margin: 0 0 8px;
    padding: 8px;
    border-radius: 8px;
}
.modal-browse-note.is-banned  { color: #ff4757; background: rgba(255, 71, 87, 0.1); }
.modal-browse-note.is-limited { color: #e67e22; background: rgba(230, 126, 34, 0.1); }

/* แถวปุ่มเรียงตาม: อยู่ติดใต้ช่องค้นหา ไม่ต้องมีระยะเพิ่ม */
#searchBar .card-sort-bar { margin-top: -4px; }

/* --- มือถือ --- */
@media (max-width: 768px) {
    /* มือถือใช้ปุ่มลอย "โหมดจัดเด็ค" เป็นตัวสลับโหมดแทน */
    .app-mode-switch { display: none; }

    /* แถว 1: ช่องค้นหา + ปุ่มตัวกรอง / แถว 2: ฟอร์แมต (เต็มแถว) */
    .search-box   { order: 1; flex: 1 1 0; max-width: none; }
    #filterToggleBtn { order: 2; }
    .format-box   { order: 3; flex: 1 1 100%; }

    #banlistFormatSelect { flex: 1 1 auto; min-width: 0; height: 40px; }
    #limitedSearch       { height: 40px; padding: 0 10px; }

    /* จอแคบ: เหลือแต่ไอคอน ประหยัดที่ */
    .format-label span,
    #limitedSearch span { display: none; }

    /* หัวเว็บบนมือถือ: เล็กลง บรรทัดเดียว */
    h1.main-title { font-size: 22px; gap: 10px; padding: 8px 0 !important; }
    h1.main-title img { width: 34px; }

    /* ปุ่มในแถวค้นหาให้กะทัดรัด ช่องพิมพ์จะได้กว้างขึ้น */
    #abilitySearchToggle { padding: 0 10px !important; }
    #filterToggleBtn { padding: 0 10px; }
}