/* 怪獸資料頁：分類篩選、緊湊卡片與詳情 */






body > main .monster-grid{grid-template-columns:repeat(auto-fill,minmax(166px,1fr));gap:12px}
body > main .monster-card{border-radius:14px}
body > main .monster-portrait{height:142px}
body > main .monster-portrait:before{width:104px;height:104px}
body > main .monster-portrait:after{width:78px;height:78px}
.monster-glyph{width:58px!important;height:66px!important;font-size:24px!important}
body > main .monster-info{padding:10px 12px 12px}
body > main .monster-info h3{font-size:16px;margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.monster-meta{margin:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.monster-stars{margin:2px 0 0;font-size:11px;letter-spacing:1px;color:var(--gold)}
.monster-portrait[data-race="祖龍族"],.dialog-portrait[data-race="祖龍族"]{background:radial-gradient(circle at 50% 60%,rgba(214,120,84,.3),transparent 62%),#1c1314}
.monster-portrait[data-race="屍鬼族"],.dialog-portrait[data-race="屍鬼族"]{background:radial-gradient(circle at 50% 60%,rgba(150,128,140,.28),transparent 62%),#1a1416}
.monster-portrait[data-race="星靈族"],.dialog-portrait[data-race="星靈族"]{background:radial-gradient(circle at 50% 60%,rgba(206,170,120,.3),transparent 62%),#1c1614}
.monster-portrait[data-race="木偶族"],.dialog-portrait[data-race="木偶族"]{background:radial-gradient(circle at 50% 60%,rgba(176,140,104,.28),transparent 62%),#1b1513}
.monster-portrait[data-race="遠古族"],.dialog-portrait[data-race="遠古族"]{background:radial-gradient(circle at 50% 60%,rgba(190,150,90,.3),transparent 62%),#1b1611}
.monster-portrait[data-race="原生族"],.dialog-portrait[data-race="原生族"]{background:radial-gradient(circle at 50% 60%,rgba(170,120,110,.26),transparent 62%),#1a1414}
.monster-portrait[data-race="彼岸族"],.dialog-portrait[data-race="彼岸族"]{background:radial-gradient(circle at 50% 60%,rgba(200,150,150,.28),transparent 62%),#1c1416}
.detail-dialog{width:min(760px,calc(100% - 28px))!important}
.dialog-head{display:flex;gap:18px;align-items:center;margin-bottom:10px}
.dialog-portrait{flex:none;width:112px;height:112px;border-radius:16px;display:grid;place-items:center;border:1px solid rgba(225,174,133,.3);overflow:hidden}
.dialog-portrait .monster-image{padding:6px}
.dialog-heading .dialog-title{margin:2px 0 8px}
.dialog-tags{display:flex;flex-wrap:wrap;gap:6px}
.dialog-tags .tag{font-size:12px;padding:2px 10px;border-radius:999px;border:1px solid rgba(201,173,156,.28);color:var(--muted)}
.dialog-tags .tag-star{color:var(--gold)}
.dialog-role{margin:8px 0 4px;color:var(--ink);font-size:15px}
.dialog-flavor{margin:0 0 6px;color:var(--muted);font-size:13px;line-height:1.9;white-space:pre-line}
.dialog-section{font:400 20px var(--serif);margin:22px 0 10px;padding-top:14px;border-top:1px solid rgba(225,174,133,.18)}
.level-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.level-row label{font-size:14px;color:var(--ink)}
.level-row input{width:84px;min-height:36px;margin-left:6px;padding:4px 10px;border-radius:9px;border:1px solid rgba(227,180,139,.46);background:#1d1416;color:var(--ink);font:15px var(--sans);text-align:center}
.level-note{font-size:12px;color:var(--muted)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.stat-cell{padding:10px 12px;border:1px solid rgba(225,174,133,.18);border-radius:12px;background:rgba(29,20,22,.5);display:flex;flex-direction:column;gap:2px}
.stat-label{font-size:12px;color:var(--muted)}
.stat-value{font:600 20px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.stat-hint{font-size:11px;color:var(--muted);line-height:1.5}
.skill-level-pick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.skill-list-dialog .skill-block{padding:12px 0;border-top:1px solid rgba(225,174,133,.14)}
.skill-list-dialog .skill-block h4{font:400 17px var(--serif);margin:0 0 4px;color:#f0dfc0}
.skill-list-dialog .lv-value{color:var(--gold);font-weight:600}
.skill-growth{margin:4px 0;font-size:12px;color:var(--muted)}
.skill-link{font-size:13px;color:var(--gold)}
.evo-row{display:flex;flex-direction:column;gap:8px}
.evo-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.evo-label{font-size:13px;color:var(--muted);min-width:64px}
@media(max-width:640px){body > main .monster-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}body > main .monster-portrait{height:116px}.dialog-portrait{width:84px;height:84px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.detail-dialog{background:linear-gradient(160deg,#241718,#170f10)!important;border-color:rgba(225,174,133,.34)!important}
.detail-dialog .dialog-close{background:#2a1b1c!important;border-color:rgba(225,174,133,.4)!important;color:var(--ink)!important}
.monster-glyph{clip-path:none!important;border-radius:50%!important;width:60px!important;height:60px!important;background:radial-gradient(circle at 40% 35%,rgba(240,200,150,.28),rgba(120,70,60,.35) 60%,rgba(40,24,24,.9))!important;border:1px solid rgba(236,196,140,.45);color:#f3dcb4!important;text-shadow:0 0 12px rgba(240,190,120,.55)!important;filter:none!important}
body > main .monster-portrait:before,body > main .monster-portrait:after{border-color:rgba(225,174,133,.16)!important}
.dialog-portrait .monster-glyph{width:74px!important;height:74px!important;font-size:30px!important}

/* 有頭像時不畫裝飾圓圈，頭像放大置中 */
body > main .monster-portrait:has(.monster-image)::before,body > main .monster-portrait:has(.monster-image)::after{display:none!important}
body > main .monster-portrait .monster-image{padding:4px!important;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}
.dialog-portrait:has(.monster-image)::before,.dialog-portrait:has(.monster-image)::after{display:none!important}

/* 依品質上底色（對照遊戲內圖鑑：1 綠、2 藍、3 紫、4 橙金、5 紅） */
body > main .monster-card{--q:#6f7a70}
body > main .monster-card:has([data-quality="1"]){--q:#4f9a45}
body > main .monster-card:has([data-quality="2"]){--q:#3f7fa8}
body > main .monster-card:has([data-quality="3"]){--q:#8a55c2}
body > main .monster-card:has([data-quality="4"]){--q:#d18a2e}
body > main .monster-card:has([data-quality="5"]){--q:#c9383a}
body > main .monster-card{border-color:color-mix(in srgb,var(--q) 70%,transparent)!important}
body > main .monster-portrait[data-quality],.dialog-portrait[data-quality]{background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--q) 85%,white 8%),color-mix(in srgb,var(--q) 55%,#120c0d) 58%,#140d0e 100%)!important}
.dialog-portrait[data-quality="1"]{--q:#4f9a45}.dialog-portrait[data-quality="2"]{--q:#3f7fa8}.dialog-portrait[data-quality="3"]{--q:#8a55c2}.dialog-portrait[data-quality="4"]{--q:#d18a2e}.dialog-portrait[data-quality="5"]{--q:#c9383a}
body > main .monster-stars{color:var(--q)!important;filter:brightness(1.35)}