:root { --monster-gold:#d0aa55; --monster-gold-light:#f0d487; --monster-paper:#eee5d0; --monster-paper-dark:#d8cbb0; --monster-red:#7e261e; }
.monster-page-body { margin:0; color:#211b13; background-color:#070503; }
.monster-page-main { width:min(1500px,calc(100% - 24px)); min-height:calc(100vh - 130px); margin:0 auto; padding:38px 0 70px; }
.monster-frame { padding:14px; }
.monster-frame .breadcrumb { background:rgba(8,7,5,.88); }
.monster-guide-content { padding:clamp(14px,2vw,24px); }
.monster-guide-categories a { display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto auto; gap:2px 12px; align-items:center; padding:12px 10px; border:1px solid rgba(181,132,48,.7); border-radius:10px; color:#cdbd9f; background:linear-gradient(105deg,rgba(48,25,9,.9),rgba(15,12,9,.9)); text-align:left; text-decoration:none; box-shadow:inset 0 1px rgba(255,220,142,.08); }
.monster-guide-categories a>span { grid-row:1/3; color:#c98d28; font:1.05rem Georgia,serif; }
.monster-guide-categories a b { color:#f3dab0; font-size:1rem; }
.monster-guide-categories a small { color:#9f917a; font-size:.74rem; }
.monster-guide-categories a:hover,.monster-guide-categories a:focus-visible,.monster-guide-categories a.active { border-color:#e0ac4d; background:linear-gradient(105deg,rgba(111,42,12,.92),rgba(32,17,9,.92)); box-shadow:inset 0 -3px #c9821f,0 7px 18px rgba(0,0,0,.34); }

.monster-catalog { overflow:hidden; border:1px solid #4a3618; border-radius:0 0 9px 9px; color:#211b13; background:#e9dfc9; font:14px/1.55 "PMingLiU","新細明體","MingLiU",serif; }
.monster-catalog *,.monster-catalog *::before,.monster-catalog *::after { box-sizing:border-box; }
.monster-catalog button,.monster-catalog input { font:inherit; }
.monster-catalog button { cursor:pointer; }
.monster-category-index { margin:24px 24px 20px; padding:13px 14px 17px; border:1px solid #9f7a37; background:#ddd0b4; text-align:center; }
.monster-category-index h2 { margin:0 0 13px; color:#2c2113; font-size:15px; }
.monster-category-links { display:flex; flex-wrap:wrap; justify-content:center; }
.monster-category-links button { margin:4px 0; padding:3px 12px; border:0; border-right:1px solid #8b6c35; color:#6f2619; background:transparent; font-weight:bold; }
.monster-category-links button:hover,.monster-category-links button.active { color:#c13c21; text-decoration:underline; }
.monster-category-links b { color:#786a50; font-size:10px; font-weight:normal; }
.monster-admin-bar { display:flex; align-items:center; gap:10px; margin:0 24px 14px; padding:11px 13px; border:1px solid #8d6b32; color:#d9c18a; background:#21180d; box-shadow:0 3px 10px rgba(20,12,4,.22); }
.monster-admin-bar>div { min-width:200px; flex:1; }
.monster-admin-bar b,.monster-admin-bar span { display:block; }
.monster-admin-bar b { color:#f1d27f; font-size:13px; }
.monster-admin-bar span { margin-top:2px; color:#aa9873; font-size:10px; }
.monster-admin-bar button,.monster-editor>button,.monster-actions button,.monster-change-image,.monster-drop-heading button,.monster-drop-editor button,.monster-drop-actions button { min-height:32px; padding:6px 11px; border:1px solid #a67b32; color:#f5d58a; background:linear-gradient(#5d3a17,#2d1b0e); font-weight:bold; }
.monster-admin-bar button:hover,.monster-editor>button:hover,.monster-actions button:hover,.monster-change-image:hover,.monster-drop-heading button:hover,.monster-drop-editor button:hover,.monster-drop-actions button:hover { border-color:#e4b64d; color:#fff1bb; background:linear-gradient(#85511d,#472510); }
.monster-manage-button { min-width:126px; }
.monster-editor { display:grid; grid-template-columns:repeat(8,minmax(95px,1fr)); gap:9px; margin:0 24px 16px; padding:14px; border:1px solid #aa8140; background:#d8cbb0; }
.monster-editor label,.monster-drop-editor label { display:grid; gap:4px; color:#60461f; font-size:10px; font-weight:bold; }
.monster-editor input,.monster-drop-editor input { width:100%; min-height:34px; padding:6px 8px; border:1px solid #9c7940; color:#24180c; background:#fff9ed; outline:none; }
.monster-editor input:focus,.monster-drop-editor input:focus { border-color:#cf8e20; box-shadow:0 0 0 2px rgba(207,142,32,.18); }
.monster-name-field { grid-column:span 2; }
.monster-check { display:flex!important; align-items:center; gap:6px!important; align-self:end; min-height:34px; padding:6px 8px; border:1px solid #a98b56; background:#eee3cc; }
.monster-check input { width:auto; min-height:0; }
.monster-editor>button { align-self:end; }
.monster-filter-panel { position:sticky; top:66px; z-index:4; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; margin:0 24px; padding:12px; border:1px solid #b08a42; background:#21180d; box-shadow:0 5px 14px rgba(20,12,4,.3); }
.monster-search-field { position:relative; }
.monster-search-field span { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }
.monster-search-field input { width:100%; height:40px; padding:7px 60px 7px 10px; border:1px solid #8e713c; color:#211b13; background:#fffaf0; outline:none; }
.monster-search-field input:focus { border-color:#e0bb65; box-shadow:0 0 0 2px rgba(224,187,101,.2); }
.monster-search-field button { position:absolute; top:7px; right:6px; height:26px; border:0; color:#674f29; background:#e4d8bd; font-size:10px; }
.monster-level-buttons { display:contents; }
.monster-level-buttons button { min-height:40px; padding:5px 6px; border:1px solid #8e713c; color:#e8cd8c; background:#3a2915; font-weight:bold; }
.monster-level-buttons button:hover,.monster-level-buttons button.active { border-color:#e3bd64; color:#fff4c8; background:#78571f; }
.monster-result-summary { display:flex; justify-content:space-between; align-items:center; margin:15px 24px 0; color:#6c5735; font-size:12px; }
.monster-result-summary strong { color:#6f2619; }
.monster-list { display:grid; gap:12px; padding:0 24px 8px; margin-top:12px; }
.monster-card { position:relative; border:1px solid #9a773a; background:#f5eddd; box-shadow:0 2px 8px rgba(44,29,9,.12); }
.monster-card.boss-card { border-color:#8e2d20; box-shadow:inset 4px 0 #8e2d20,0 2px 8px rgba(44,29,9,.12); }
.monster-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; padding:7px 9px; border-bottom:1px solid #b99b62; background:#302111; }
.monster-change-image { position:relative; display:inline-grid; place-items:center; cursor:pointer; }
.monster-change-image input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.monster-remove-button,.monster-delete-drop { border-color:#994a32!important; color:#ffd1bd!important; background:linear-gradient(#71301f,#3b1710)!important; }
.monster-card-main { min-height:116px; display:grid; grid-template-columns:112px minmax(215px,1.15fr) minmax(270px,1.35fr) minmax(220px,1fr) minmax(210px,.95fr); align-items:stretch; }
.monster-image { min-height:112px; display:grid; place-items:center; overflow:hidden; border-right:1px solid #80602f; background:#000; }
.monster-image img { display:block; width:auto; height:auto; max-width:96px; max-height:96px; object-fit:contain; image-rendering:crisp-edges; image-rendering:pixelated; }
.monster-hidden-mark { display:grid; place-items:center; width:64px; height:64px; border:1px dashed #6e572e; color:#c9a85e; font:700 28px Georgia,serif; }
.monster-identity,.monster-primary-stats,.monster-secondary-stats,.monster-map-summary { padding:13px 14px; border-right:1px solid #d0bd93; }
.monster-identity-top { display:flex; align-items:center; gap:7px; color:#725526; font-size:11px; }
.monster-identity-top b { padding:2px 6px; color:#fff1c3; background:#7e261e; font-size:9px; letter-spacing:.1em; }
.monster-identity h2 { margin:6px 0 4px; color:#692315; font-size:18px; }
.monster-identity p { margin:0; color:#776b57; font:10px monospace; }
.monster-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:10px; }
.monster-tags span { padding:2px 6px; border:1px solid #ae9666; color:#584522; background:#e4d5b5; font-size:9px; }
.monster-tags .danger { border-color:#8b2b20; color:#fff; background:#8b2b20; }
.monster-tags .calm { border-color:#35604a; color:#fff; background:#35604a; }
.monster-primary-stats { margin:0; display:grid; grid-template-columns:1.5fr repeat(3,1fr); align-items:center; text-align:center; }
.monster-primary-stats div { border-right:1px solid #dac9a5; }
.monster-primary-stats div:last-child { border:0; }
.monster-primary-stats dt { color:#766344; font-size:9px; }
.monster-primary-stats dd { margin:5px 0 0; color:#4d2c11; font-size:15px; font-weight:bold; }
.monster-primary-stats i { color:#a58a57; font-style:normal; }
.monster-secondary-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; align-content:center; color:#796b55; font-size:10px; }
.monster-secondary-stats span:nth-child(-n+2) { grid-column:span 3; }
.monster-secondary-stats b { color:#3c2c18; }
.monster-map-summary { border:0; display:flex; flex-direction:column; justify-content:center; }
.monster-map-summary small { color:#766344; }
.monster-map-summary p { min-height:31px; margin:5px 0 9px; line-height:1.5; font-size:11px; }
.monster-map-summary button { min-height:32px; border:1px solid #8e6d33; color:#ecd188; background:#2a1e0f; font-weight:bold; }
.monster-expanded { display:grid; gap:16px; padding:16px; border-top:1px solid #9a773a; background:#dfd0b2; }
.monster-expanded h3 { margin:0 0 9px; color:#4c3013; font-size:13px; }
.monster-drop-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:9px; }
.monster-drop-heading h3 { margin:0; }
.monster-drop-heading>div { display:flex; flex-wrap:wrap; gap:6px; }
.monster-drop-editor { display:grid; grid-template-columns:120px minmax(190px,1.5fr) 110px 110px 130px auto auto; gap:8px; align-items:end; margin:0 0 10px; padding:11px; border:1px solid #a9874c; background:#cdbd9d; }
.monster-editor-note { grid-column:1/-1; color:#675333; }
.monster-drop-editor button { min-height:34px; }
.monster-editor-cancel { color:#332817!important; background:#e6d9bd!important; }
.monster-spawn-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:7px; }
.monster-spawn-grid>div { padding:9px; border:1px solid #b79a64; background:#f6efe1; }
.monster-spawn-grid b,.monster-spawn-grid span { display:block; }
.monster-spawn-grid span { margin-top:3px; color:#74664f; font-size:10px; }
.monster-drop-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:6px; }
.monster-drop-list.editing { grid-template-columns:repeat(2,minmax(0,1fr)); }
.monster-drop-item { min-height:58px; display:grid; grid-template-columns:52px minmax(130px,1fr) 70px 110px; align-items:center; gap:8px; padding:5px 9px 5px 4px; border:1px solid #b79a64; background:#f6efe1; font-size:10px; }
.monster-drop-item.editing { grid-template-columns:52px minmax(120px,1fr) 70px 110px; }
.monster-drop-item.selected { border-color:#b53b25; background:#ffe7c8; box-shadow:inset 4px 0 #a52e20; }
.monster-drop-actions { display:flex; gap:6px; }
.monster-drop-item.editing .monster-drop-actions { grid-column:1/-1; justify-content:flex-end; padding:6px 2px 1px; border-top:1px solid #d3bd90; }
.monster-drop-actions button { min-height:29px; padding:4px 8px; font-size:9px; }
.monster-drop-select { display:flex; align-items:center; gap:4px; min-height:29px; padding:4px 7px; border:1px solid #8b6a34; color:#4d3214; background:#efe2c5; cursor:pointer; font-size:9px; font-weight:bold; }
.monster-drop-select input { width:15px; height:15px; margin:0; accent-color:#8e2d20; }
.monster-drop-heading button:disabled { opacity:.45; cursor:not-allowed; }
.monster-drop-image { width:48px; height:48px; display:grid; place-items:center; overflow:hidden; color:#8b6e35; background:#000; }
.monster-drop-image img { display:block; max-width:44px; max-height:44px; object-fit:contain; image-rendering:pixelated; }
.monster-drop-item div>b { display:block; color:#6d2518; font-size:11px; }
.monster-drop-item small { display:block; margin-top:3px; color:#81745e; font-size:8px; }
.monster-drop-item>span>b { display:block; color:#4f3213; font-size:11px; }
.monster-empty,.monster-status-box { margin:0; padding:18px; border:1px solid #b79a64; color:#796b52; background:#f6efe1; text-align:center; }
.monster-status-box { margin:20px 24px; padding:80px 20px; }
.monster-pagination { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:7px; margin:20px 24px 30px; padding:14px; border:1px solid #9d7b3c; color:#dfc786; background:#21180d; }
.monster-pagination button { min-width:38px; min-height:38px; border:1px solid #8e713c; color:#efd386; background:#3a2915; font-weight:bold; }
.monster-pagination button:hover,.monster-pagination button.active { border-color:#e3bd64; color:#fff4c8; background:#78571f; }
.monster-pagination button:disabled { opacity:.38; cursor:not-allowed; }
.monster-pagination small { margin-left:8px; color:#cbb47e; }
.monster-page-footer { width:min(1500px,calc(100% - 24px)); margin:auto; padding:26px 28px 40px; border-top:1px solid #a47b36; color:#a79573; background:#1b140c; text-align:center; font:11px/1.7 "PMingLiU","新細明體","MingLiU",serif; }
.monster-page-footer strong { display:block; color:#e6c775; font-size:14px; }
.monster-page-footer p { margin:8px 0 0; }
@media(max-width:1180px) { .monster-editor { grid-template-columns:repeat(5,minmax(95px,1fr)); } .monster-drop-editor { grid-template-columns:repeat(3,minmax(120px,1fr)); } .monster-card-main { grid-template-columns:112px 1fr 1.35fr; } .monster-secondary-stats { border-right:0; } .monster-map-summary { grid-column:2/-1; display:grid; grid-template-columns:1fr auto; gap:8px; border-top:1px solid #d0bd93; } .monster-map-summary small { grid-column:1/-1; } .monster-map-summary p { margin:0; } .monster-map-summary button { min-width:170px; } }
@media(max-width:800px) { .monster-page-main { width:100%; padding-top:14px; } .monster-guide-content { padding:10px; } .monster-category-index,.monster-admin-bar,.monster-editor,.monster-filter-panel,.monster-result-summary { margin-inline:10px; } .monster-admin-bar { align-items:stretch; flex-direction:column; } .monster-editor { grid-template-columns:repeat(2,minmax(0,1fr)); } .monster-name-field { grid-column:span 1; } .monster-list { padding-inline:10px; } .monster-filter-panel { position:relative; top:auto; grid-template-columns:repeat(3,minmax(0,1fr)); } .monster-card-main { grid-template-columns:96px 1fr; } .monster-image { grid-row:span 2; } .monster-identity { border-right:0; } .monster-primary-stats { grid-column:2; border-top:1px solid #d0bd93; border-right:0; } .monster-secondary-stats { grid-column:1/-1; border-top:1px solid #d0bd93; } .monster-map-summary { grid-column:1/-1; } .monster-drop-editor { grid-template-columns:repeat(2,minmax(0,1fr)); } .monster-drop-list,.monster-drop-list.editing { grid-template-columns:1fr; } .monster-drop-item.editing { grid-template-columns:52px minmax(120px,1fr) 70px 100px; } }
@media(max-width:520px) { .monster-filter-panel { grid-template-columns:repeat(2,minmax(0,1fr)); } .monster-editor,.monster-drop-editor { grid-template-columns:1fr; } .monster-card-main { grid-template-columns:92px 1fr; } .monster-primary-stats { grid-column:1/-1; } .monster-image { grid-row:auto; } .monster-secondary-stats { grid-template-columns:repeat(3,1fr); } .monster-map-summary { display:flex; } .monster-drop-heading { align-items:flex-start; flex-direction:column; } .monster-drop-item,.monster-drop-item.editing { grid-template-columns:48px 1fr 70px; } .monster-drop-item>span:last-of-type { grid-column:2/-1; } .monster-drop-actions { grid-column:2/-1; } .monster-spawn-grid { grid-template-columns:1fr; } .monster-pagination { margin-inline:10px; } }