.detona-monsters { color:#eee8f3; font:14px/1.55 Arial,sans-serif; }
.detona-monsters h1 { margin:0 0 8px; color:#f1cd83; font:30px/1.25 Georgia,serif; }
.detona-monsters p { color:#d7cede; }
.detona-monsters .detona-monsters-kicker { margin:0 0 7px; color:#cbb2d9; font-size:11px; font-weight:bold; letter-spacing:1.5px; text-transform:uppercase; }
.detona-monsters .detona-monsters-search { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; padding:18px; margin:22px 0 14px; background:linear-gradient(130deg,#2a1c37,#171320); border:1px solid #65506f; }
.detona-monsters-search label { display:grid; gap:5px; font-size:12px; color:#e7d9ef; }
.detona-monsters-search label:first-of-type { flex:1 1 190px; }
.detona-monsters-search input,.detona-monsters-search select { box-sizing:border-box; width:100%; min-height:39px; padding:8px 10px; background:#140f1d; color:#f7f2fa; border:1px solid #786487; border-radius:2px; }
.detona-monsters-search button { min-height:39px; padding:8px 19px; color:#fff2d1; border:1px solid #b19a66; background:linear-gradient(#704286,#412653); cursor:pointer; font-weight:bold; }
.detona-monsters-search a { align-self:center; color:#edca85; }
.detona-monsters .detona-monsters-results { font-size:12px; color:#c9bed2; }
.detona-monsters-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px; }
.detona-monsters .detona-monster-card { display:flex; flex-direction:column; align-items:center; padding:12px 8px 15px; border:1px solid #695675; background:linear-gradient(145deg,#271b34,#15111e); text-decoration:none; color:#e9dfed; text-align:center; transition:background .2s,border-color .2s,box-shadow .2s; }
.detona-monsters .detona-monster-card:hover,.detona-monsters .detona-monster-card:focus-visible { border-color:#cfb275; background:linear-gradient(145deg,#42274f,#22192c); box-shadow:inset 0 0 16px #81509b22; }
.detona-monster-portrait { display:block; flex:0 0 96px; width:96px; height:96px; background-image:var(--monster-atlas); background-repeat:no-repeat; image-rendering:pixelated; }
.detona-monster-no-image { display:flex; justify-content:center; align-items:center; width:96px; height:96px; flex:0 0 96px; color:#b9a9c4; font-size:11px; line-height:1.5; text-align:center; }
.detona-monster-card strong { display:flex; min-height:42px; align-items:center; justify-content:center; margin:5px 0 8px; color:#efd298; font:16px/1.3 Georgia,serif; overflow-wrap:anywhere; }
.detona-monster-card>span:not(.detona-monster-portrait):not(.detona-monster-no-image) { font-size:12px; }
.detona-monster-card b { color:#bfb0cb; font-weight:normal; margin-right:5px; }
.detona-monsters-pagination { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:24px 0; }
.detona-monsters-pagination a { display:block; min-width:30px; box-sizing:border-box; padding:6px 9px; color:#e9d7b1; background:#241a30; border:1px solid #695675; text-align:center; text-decoration:none; }
.detona-monsters-pagination a[aria-current] { color:#17111d; background:#e3bd75; border-color:#f5d99c; font-weight:bold; }
.detona-monsters-pagination a:hover { border-color:#e3bd75; }
.detona-monsters .detona-monsters-note { padding:14px 16px; margin:22px 0 0; color:#cbbfd3; background:#1b1425; border-left:3px solid #927146; font-size:12px; }
.detona-monsters .detona-monsters-back { display:inline-block; color:#eed09a; margin-bottom:22px; }
.detona-monster-detail-heading { display:flex; align-items:center; gap:24px; padding:20px; border:1px solid #7a6388; background:radial-gradient(ellipse at top left,#51305e,#191220 80%); }
.detona-monster-detail-heading h1 { overflow-wrap:anywhere; }
.detona-monster-detail-heading p:last-child { margin:5px 0 0; font-size:12px; }
.detona-monster-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:10px; margin:18px 0; }
.detona-monster-stats>div { padding:15px; border:1px solid #584662; background:#21172b; }
.detona-monster-stats dt { font-size:12px; color:#cbbad7; }
.detona-monster-stats dd { margin:5px 0 0; color:#f2d69e; font:20px/1.3 Georgia,serif; }
.detona-monsters :is(a,button,input,select):focus-visible { outline:2px solid #f6d691; outline-offset:3px; }
@media(max-width:480px) { .detona-monsters-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .detona-monster-detail-heading { gap:10px; padding:12px; } .detona-monsters h1 { font-size:24px; } .detona-monster-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { .detona-monsters .detona-monster-card { transition:none; } }