body {
    background: #cccccc;
}

.category {
    display: flex;
}

@media screen and (max-width: 767px) {
    .category {
        display: block;
    }
}

.group {
    margin: 8px;
    display: flex;
}


.base {
    margin: 8px;
}

.indicator {
    width: 50px;
    display: flex;
    justify-content: space-between;
}

.level {
    height: 4px;
    margin: 2px;
    flex: 1;
}

.level_glow {
    box-shadow: 0 0 3px 1px #ffffff;
}

.chip {
    width: 46px;
    height: 46px;
    padding: 2px;
    font-size: 8px;
    flex: 100%;
    overflow: hidden;
    cursor: pointer;
}

.chip_unknown {
    background: #dddddd;
}

.chip_glow {
    box-shadow: 0 0 5px 3px #ffffff, inset 0 0 3px 2px #ffffff;
}

.chip_power {
    background: #fd7e7e;
}

.chip_support {
    background: #d680ff;
}

.chip_range {
    background: #ffb97f;
}

.chip_move {
    background: #8497ff;
}

.chip_lucky {
    background: #ffe47c;
}

.chip_drone {
    background: #97ff81;
}