/* หน้าเอนชานท์พิเศษ (enchants.html) — ใช้ตัวแปรสีจาก style.css */
.ench-page .rules{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:6px}
.ench-page .rule{background:#fff;border:3px solid var(--ink);border-radius:var(--radius);padding:14px 16px;box-shadow:0 5px 0 var(--lilac)}
.ench-page .rule b{display:block;font-size:15px;color:var(--ink-soft);font-weight:500}
.ench-page .rule span{display:block;font-size:20px;font-weight:700;margin-top:2px}
.ench-page .rule small{display:block;color:var(--ink-soft);font-size:13px;margin-top:2px}
.ench-page .twocol{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ench-page .tbl{width:100%;border-collapse:collapse;font-size:15px}
.ench-page .tbl th{text-align:left;font-weight:600;color:var(--ink-soft);padding:6px 8px;border-bottom:3px solid #E8DDF3}
.ench-page .tbl td{padding:8px;border-bottom:2px dotted #E8DDF3;vertical-align:middle}
.ench-page .tbl td.num{text-align:right;font-weight:700;white-space:nowrap}
.ench-page .bar{height:10px;border-radius:999px;background:#F0E6FA;overflow:hidden;min-width:70px}
.ench-page .bar i{display:block;height:100%;border-radius:999px}

/* ระดับความหายาก */
.t-Common{--tc:#8E8AA0;--tb:#EEEAF5}
.t-Rare{--tc:#3C9AD6;--tb:#DDF0FC}
.t-Epic{--tc:#B25BD6;--tb:#F4E1FB}
.t-Legendary{--tc:#D99A1C;--tb:#FFF1C9}
.tier{display:inline-flex;align-items:center;gap:6px;background:var(--tb);color:var(--tc);border:2px solid var(--tc);border-radius:999px;padding:0 12px;font-size:13px;font-weight:700;white-space:nowrap}
.bar i.t-Common{background:#B9B5C9}.bar i.t-Rare{background:#6FBCEB}.bar i.t-Epic{background:#CF8BEA}.bar i.t-Legendary{background:#F2BE4A}

/* แถบควบคุมรายการเอนชานท์ */
.ench-ctl{display:grid;gap:12px;margin:6px 0 4px}
.ench-ctl .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.ench-ctl label{font-size:14px;color:var(--ink-soft);font-weight:500}
.ench-ctl input[type=search],.ench-ctl select{font:inherit;border:3px solid var(--ink);border-radius:999px;padding:6px 16px;background:#fff;color:var(--ink);min-width:0}
.ench-ctl input[type=search]{width:min(320px,100%)}
.ench-count{text-align:center;color:var(--ink-soft);font-size:14px;margin:6px 0 14px}

/* การ์ดเอนชานท์ */
.ench-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.ench{background:var(--card);border:3px solid #fff;border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);border-top:6px solid var(--tc);display:flex;flex-direction:column;gap:8px}
.ench:target{outline:4px solid var(--butter-d)}
.ench .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ench h3{font-size:19px;line-height:1.25}
.ench h3 small{display:block;font-size:13px;color:var(--ink-soft);font-weight:400}
.ench .desc{color:var(--ink-soft);font-size:15px}
.ench .meta{display:flex;flex-wrap:wrap;gap:6px}
.ench .chipx{background:#F8F1FF;border:2px solid #E6DDF2;border-radius:999px;padding:0 10px;font-size:12.5px;font-weight:500;color:var(--ink)}
.ench .chipx.lv{background:var(--butter);border-color:var(--butter-d)}
.ench .st{display:grid;gap:4px;margin-top:2px;border-top:2px dotted #E8DDF3;padding-top:8px}
.ench .st div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.ench .st div span{color:var(--ink-soft)}
.ench .st div b{text-align:right;color:var(--ink);white-space:nowrap}
.ench .note{font-size:12.5px;color:var(--ink-soft)}
.ench-empty{text-align:center;padding:30px;color:var(--ink-soft)}

/* บันทึกอัปเดต */
.logs{display:grid;gap:18px}
.log h3{font-size:17px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.log .date{background:var(--pink);color:#fff;border:2px solid var(--ink);border-radius:999px;padding:0 12px;font-size:13px;font-weight:700}
.log .new{background:var(--butter);border:2px solid var(--butter-d);border-radius:999px;padding:0 10px;font-size:12px;font-weight:700}
@media (max-width:520px){.ench-grid{grid-template-columns:1fr}.ench-page .tbl{font-size:14px}}