.creature-info-button { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; margin:0 0 0 7px; border:1px solid #d7b76e; border-radius:50%; color:#e8c879; background:#372f22; font:700 14px Georgia,serif; vertical-align:middle; }
.creature-info-button:hover,.creature-info-button:focus-visible { background:#3c3540; outline:2px solid #d7b76e; outline-offset:2px; }
.creature-info[hidden] { display:none; }
.creature-info { position:fixed; z-index:1000; width:min(1100px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; padding:18px; color:#f5f3ef; background:#1e1810; border:1px solid #796b55; border-radius:12px; box-shadow:0 18px 70px #000b; font:14px/1.5 Arial,Helvetica,sans-serif; scrollbar-color:#796b55 #231e16; }
.info-top { display:grid; grid-template-columns:1.2fr 1fr; gap:20px; padding:4px 0 18px; }
.info-identity { display:flex; gap:20px; align-items:center; }
.info-sprite { width:84px; height:100px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border:1px solid #4c402f; border-radius:9px; background:#261f15; }
.info-sprite img { width:64px; height:64px; object-fit:contain; image-rendering:pixelated; }
.info-identity-content { flex:1; min-width:0; }
.creature-info h2 { margin:0 0 16px; font-size:28px; }
.info-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
.info-stat { display:flex; align-items:center; gap:9px; }
.info-stat .info-icon { flex-shrink:0; }
.info-icon { display:inline-block; width:16px; height:16px; object-fit:contain; vertical-align:middle; image-rendering:pixelated; }
.info-stat img[src*="difficulty"],.info-stat img[src*="rarity"] { width:auto; max-width:60px; height:auto; max-height:16px; }
.info-bestiary { color:#bbb4a9; font-size:12px; margin:14px 0 0; }
.info-combat { border-left:1px solid #4c402f; padding-left:20px; }
.info-resistances { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.info-resistance { display:flex; gap:8px; align-items:center; border:1px solid #584c39; border-radius:6px; overflow:hidden; }
.info-resistance img { margin:6px 2px 6px 8px; }
.info-resistance span { flex:1; text-align:center; padding:3px; }
.info-resistance.weak span { color:#86e0a9; background:#183b29; }
.info-resistance.immune span { color:#ff9d9d; background:#3a2025; }
.info-resistance.resistant span { color:#e4bf62; background:#3d341d; }
.info-flags { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin-top:12px; }
.info-flags h3 { font-size:13px; color:#d7b76e; margin:0 0 5px; }
.info-flags .info-icon { margin-right:5px; }
.info-details { margin:0; border:1px solid #4c402f; border-radius:8px; padding:0 14px; background:#262016; }
.info-detail { display:grid; grid-template-columns:125px 1fr; gap:14px; padding:10px 0; border-bottom:1px solid #4c402f; }
.info-detail:last-child { border-bottom:0; }
.info-detail dt { font-weight:bold; color:#d7b76e; }
.info-detail dd { margin:0; overflow-wrap:anywhere; }
.info-ability { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.info-blue { color:#79bdff; }
.info-muted { color:#bbb4a9; }
.info-bonus { color:#86d493; }
.info-loot-group { margin-bottom:3px; }
.info-loot-group span { color:#79bdff; }
.creature-info-note { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:12px 0; color:#d7b76e; font-size:13px; }
@media(max-width:850px) { .info-top { grid-template-columns:1fr; }.info-combat { border-left:0; padding:14px 0 0; border-top:1px solid #4c402f; } }
@media(max-width:500px) { .creature-info { padding:12px; font-size:13px; }.info-identity { gap:12px; }.info-sprite { width:52px; height:70px; }.info-sprite img { width:48px; height:48px; }.info-stats { gap:10px; }.info-detail { grid-template-columns:1fr; gap:4px; }.info-stat { flex-wrap:wrap; gap:4px; } }

.info-identity-content{min-width:0}.info-details dd,.info-identity-content h2{overflow-wrap:anywhere}
.info-loading { margin:0; padding:6px 2px; color:#cfc3ad; }