/* ฐานข้อมูล v3 (2 ต.ค.) — การ์ดไอเทมแน่นขึ้น · ป้าย Rank · ประเภทมอน · ท่าบอส
   โหลดหลัง site.css/landing.css — ใช้ token เดิม ไม่ประกาศสีใหม่นอกตาราง Rank */
:root { --rank-C: #8a7a66; --rank-B: #3f8f5a; --rank-A: #3f6fb3; --rank-S: #c8952c; }

/* ── ไอเทม: กริดแน่น ไอคอนซ้าย ข้อความขวา ── */
.grid-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 960px) { .grid-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid-items { grid-template-columns: 1fr; } }
.item-card { flex-direction: row; align-items: center; gap: var(--s3); padding: 10px 14px 10px 10px; border-radius: 18px; position: relative; overflow: visible; transition: transform .15s, box-shadow .15s; }
.item-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.item-card .item-media { position: relative; flex: none; width: 76px; height: 76px; aspect-ratio: auto; border-radius: 14px; overflow: hidden; }
.item-card .item-media .item-icon:not(.item-render) { width: 64%; }
.item-card .card-body { padding: 0; min-width: 0; }
.item-card .card-body h3 { font-size: 1rem; margin: 0 0 2px; line-height: 1.3; }
.item-card .card-body .meta { font-size: .78rem; margin: 0 0 2px; }
.item-card .card-body .small { font-size: .82rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); }
.item-card.has-rank { border-left: 4px solid var(--rank-c, var(--line)); }
.item-card.rank-C { --rank-c: var(--rank-C); } .item-card.rank-B { --rank-c: var(--rank-B); } .item-card.rank-A { --rank-c: var(--rank-A); } .item-card.rank-S { --rank-c: var(--rank-S); }
.rank-badge { position: absolute; right: 4px; bottom: 4px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: var(--rank-c, var(--earth)); color: #fff; font: 600 .78rem/1 var(--font-head); box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.rank-S .rank-badge { background: linear-gradient(135deg, #f1c969, #c8952c); }
.group-title { margin-top: var(--s7); padding-bottom: var(--s2); border-bottom: 2px solid var(--line); }

/* ── มอนสเตอร์: ประเภท + ท่าบอส ── */
.role-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font: 500 .8rem/1.6 var(--font-head); background: var(--gold-soft); color: #7a5a14; border: 1px solid #ecd9a0; white-space: nowrap; }
.role-tank { background: #e6eef7; color: #2f5683; border-color: #c5d6ea; } .role-caster { background: #efe7f6; color: #5d3f86; border-color: #d9c8ea; }
.role-skirmisher { background: #e4f3e6; color: #2f6b3c; border-color: #bfdfc4; } .role-sniper { background: #f8e6e0; color: #96442f; border-color: #ecc5b9; }
.mon-card .chips { margin: 0 0 6px; }
.move-list { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--s3); }
.move { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.move strong { font-family: var(--font-head); font-size: 1.02rem; } .move .meta { font-size: .82rem; }
.move-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.move-tag { font-size: .78rem; padding: 2px 9px; border-radius: 8px; background: var(--teal-soft); color: var(--teal-deep); font-weight: 500; }
.tag-zone { background: #fbe9d0; color: #8a5316; } .tag-share { background: #e3efe1; color: #2f6b3c; } .tag-summon { background: #efe7f6; color: #5d3f86; }
.tag-leap { background: #f8e6e0; color: #96442f; } .tag-enrage, .tag-desperate { background: #f7e2e2; color: var(--danger); }

/* ── หน้ารายละเอียดมอน/ไอเทม: รูปใหญ่ขึ้น + ไม่มีช่องว่างกลาง ── */
.detail-head .split { align-items: center; gap: var(--s7); }
.mon-hero, .item-hero { border-radius: 28px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.mon-hero { max-width: 460px; width: 100%; }

/* ── หน้าแรก: แถบตัวเลข + กริดไอเทม 2 คอลัมน์ ── */
.grid-items-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 560px) { .grid-items-2 { grid-template-columns: 1fr; } }
.stat-band { padding: 8px 0 28px; }
.stat-band ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.stat-band a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 8px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: transform .15s, border-color .15s; }
.stat-band a:hover { transform: translateY(-3px); border-color: var(--gold); }
.stat-band strong { font: 600 clamp(1.5rem, 3vw, 2.1rem)/1.1 var(--font-head); color: var(--teal-deep); }
.stat-band span { font-size: .9rem; color: var(--muted); }
@media (max-width: 760px) { .stat-band ul { grid-template-columns: repeat(3, 1fr); } }