/* M4: the Hollow and the Deep Delve */

/* where you are, underground */
#dg-banner { top: calc(62px + var(--safe-t)); left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 10px; background: rgba(20, 14, 24, .72); border: 2px solid #5a3a7a; color: #f0e8ff; font-size: 13px; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 0 #000; }
#dg-banner span { color: #c8b8e0; }
@media (max-width: 600px) { #dg-banner { top: calc(72px + var(--safe-t)); left: auto; right: calc(62px + var(--safe-r)); transform: none; font-size: 12px; } }

/* gear: names in their rarity colour, on a dark tag so grey and white still read on paper */
.dg-name { display: inline-block; background: #2a1e14; padding: 0 6px; border-radius: 4px; font-weight: 700; font-size: 14px; text-shadow: 0 1px 0 #000; }
.row.dg-gear .sub { margin-top: 2px; }
.dg-up { color: #2f8a3a; }
.dg-down { color: #a0503a; }
.dg-empty { opacity: .35; width: 32px; text-align: center; }
.dg-char { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.dg-char > div { display: flex; flex-direction: column; gap: 2px; }
.dg-doll { width: 64px; height: 88px; image-rendering: pixelated; background: #cfe6a8; border-radius: 8px; border: 2px solid var(--wood2); }
.dg-lifts { flex-wrap: wrap; }
.dg-geode { width: 72px; height: 72px; image-rendering: pixelated; margin: -6px -10px; } /* cracking a geode (#19) */