/* Shared illustrated HUD atlas. The original six biological skill icons keep their own atlas. */
.interface-icon.interface-v2{background-image:url('assets/items/interface-atlas-v2.webp');border-radius:0;filter:drop-shadow(0 1px 2px #0008)}
.topnav>button{border-color:#71949c65;background:linear-gradient(150deg,#203b4ce8,#091924f2);box-shadow:inset 0 1px #c2e9ed14,0 2px 5px #0003}
.topnav>button>.interface-icon{width:34px;height:34px;margin:0 auto 5px}
.topnav>button:hover{border-color:#8edde4;background:linear-gradient(150deg,#2a5061f2,#112a37f2)}
.topnav>button:focus-visible,.righttools>button:focus-visible,.townbar>button:focus-visible{outline:2px solid #f6c56e;outline-offset:2px}
.topnav>button:active .interface-icon{transform:translateY(1px)}
.righttools .interface-icon{width:22px;height:22px;margin-right:6px;vertical-align:middle}
.townbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.townbar button span{white-space:nowrap}
.townbar .interface-icon{width:26px;height:26px;margin:0;vertical-align:middle}
#soundBtn::before,#lootNamesButton::before,.botdock>[data-open="bot"]::before{content:"";display:inline-block;flex:none;width:24px;height:24px;background-image:url('assets/items/interface-atlas-v2.webp');background-size:400% 400%;background-repeat:no-repeat;vertical-align:middle;filter:drop-shadow(0 1px 2px #0008)}
#soundBtn::before{display:block;width:34px;height:34px;margin:0 auto 5px;background-position:66.666667% 100%}
#lootNamesButton::before{width:22px;height:22px;margin-right:6px;background-position:33.333333% 100%}
.botdock>[data-open="bot"]{font-size:0}
.botdock>[data-open="bot"]::before{width:30px;height:30px;background-position:66.666667% 66.666667%}
.topnav>button{min-width:0;overflow-wrap:normal}
@media(max-width:900px),(max-height:600px) and (max-width:1200px){
 .menu-open .topnav>button>.interface-icon,.menu-open #soundBtn::before{display:inline-block;width:28px;height:28px;margin:0 8px 0 0;vertical-align:middle}
 .righttools .interface-icon,#lootNamesButton::before{width:20px;height:20px;margin-right:4px}
 .townbar .interface-icon{width:23px;height:23px;margin:0}
}
@media(max-width:420px){.townbar .interface-icon{width:21px;height:21px;margin:0}}